🔗 gatsby link

🔗 link component for gatsby

Gatsby provides a <Link> component for routing between internal pages. For external links, you have to use a regular <a> tag. This gatsby-link package solves that issue by providing a <Link> component that handles both internal and external urls.

📦 Installation

This package is hosted on npm.

npm install @bradgarropy/gatsby-link

🥑 Usage

For both internal and external links, use the Link component and pass it a to prop.

import Link from "@bradgarropy/gatsby-link"

const App = () => {
    return <Link to="https://bradgarropy.com">website</Link>
}

📖 API Reference

<Link>

| Name | Required | Default | Example | Description | | :--- | :------: | :-----: | :----------------------------------------- | :------------------------ | | to | true | | "/home" "https://bradgarropy.com" | Internal or external url. |

The component also passes through all other props, like className or activeStyle. See the Gatsby Link documentation for other relevant props. The examples below cover some common uses.

// internal link
<Link to="/home">home</Link>

// internal link with additional props
<Link to="/home" className="nav-link">home</Link>

// external link
<Link to="https://bradgarropy.com">website</Link>

// external link with additional props
<Link to="https://bradgarropy.com" className="nav-link">website</Link>

❔ Questions

🐛 report bugs by filing issues
📢 provide feedback with issues or on twitter
🙋🏼‍♂️ use my ama or twitter to ask any other questions

✨ contributors