Link

Converts a path string to a react-router Link component. It can take the path string either as child elements or as a text prop.

If no href is passed, the link is rendered with a # href. The list of routes from your project is automatically used to make decisions whether the component renders a react-route link or an anchor tag.

Code

JavaScript import


import Link from 'progressive-web-sdk/dist/components/link'

SCSS import


@import 'node_modules/progressive-web-sdk/dist/components/link/link';

Props table

Name & Description	Type	Default
children Any children for the Link component or anchor element.	node	none
className Adds values to the `class` attribute of the root element.	string	none
data Deprecated An object of data key/value pairs that are passed through to the underlying DOM node. Now that the Link component relays arbitrary props, this is unnecessary.	custom	none
href The intended target URL.	string	'javascript:'
openInNewTab If true, target="_blank" will be added to the link. Only use this property if you trust the link! https://mathiasbynens.github.io/rel-noopener	bool	none
text The text of the link (only used if no children are passed)	union	none
onBlur User-defined method for hooking into blur events. Use with onMouseLeave as a keyboard substitute for hover events.	func	none
onClick A callback to be called when the Link is clicked.	func	none
onFocus User-defined method for hooking into focus events. Use with onMouseEnter as a keyboard substitute for hover events.	func	none
onMouseEnter User-defined method for hooking into mouseEnter events. Use with the onFocus prop for keyboard a11y purposes.	func	none
onMouseLeave User-defined method for hooking into mouseLeave events. Use with the onBlur prop for keyboard a11y purposes.	func	none

Basic example

Mobify
<Link href="https://mobify.com/">Mobify</Link>
<Link href="https://mobify.com/">Mobify</Link>

With child elements

MOBIFY!
<Link href="https://mobify.com/">
    <i>MOBIFY!</i>
</Link>
<Link href="https://mobify.com/">
    <i>MOBIFY!</i>
</Link>

With prop text

Go to Google
<Link href="https://google.com/" text="Go to Google" />
<Link href="https://google.com/" text="Go to Google" />

With no href

No URL provided
<Link text="No URL provided" />
<Link text="No URL provided" />

With an onClick handler

Click me!
<Link
    text="Click me!"
    onClick={(e) => {
        alert('Clicked'), e.preventDefault()
    }}
/>
<Link
    text="Click me!"
    onClick={(e) => {
        alert('Clicked'), e.preventDefault()
    }}
/>

With hover (onEnter and onLeave) handlers

Hover Me!
class StatefulExample extends React.Component {
    constructor() {
        this.state = {
            isHovering: false
        }
    }

    hoverOn() {
        this.setState({isHovering: true})
    }

    hoverOff() {
        this.setState({isHovering: false})
    }

    render() {
        return (
            <Link
                text={this.state.isHovering ? 'Hovering! 🐭' : 'Hover Me!'}
                onMouseEnter={this.hoverOn.bind(this)}
                onMouseLeave={this.hoverOff.bind(this)}
            />
        )
    }
}
class StatefulExample extends React.Component {
    constructor() {
        this.state = {
            isHovering: false
        }
    }
    hoverOn() {
        this.setState({isHovering: true})
    }
    hoverOff() {
        this.setState({isHovering: false})
    }
    render() {
        return (
            <Link
                text={this.state.isHovering ? 'Hovering! 🐭' : 'Hover Me!'}
                onMouseEnter={this.hoverOn.bind(this)}
                onMouseLeave={this.hoverOff.bind(this)}
            />
        )
    }
}