metonym / svelte-link

Link component for Svelte

svelte-link

Anchor link component for Svelte.

Installation

Yarn

yarn add -D svelte-link

NPM

npm i -D svelte-link

pnpm

pnpm i -D svelte-link

Usage

Basic

<script>
  import Link from "svelte-link";
</script>

<Link href="https://github.com/">GitHub</Link>

Preventing the default behavior

Because event modifiers cannot be used on Svelte components, use the mouse event in the forwarded on:click event to prevent the default behavior.

<Link
  href="https://github.com/"
  on:click={(e) => {
    e.preventDefault();
  }}
>
  GitHub
</Link>

Outbound links

outbound is an alias for setting target="_blank". If rel is not specified for outbound links, rel="noopener noreferrer" is set.

outbound defaults to true if href points to an external URL. You can override this behaviour by explicitly setting outbound to false.

<Link href="https://github.com/" outbound>GitHub</Link>

<!-- same as -->

<Link href="https://github.com/" target="_blank" rel="noopener noreferrer">
  GitHub
</Link>

Prefetch

Inspired by Sapper, if the non-standard rel="prefetch" is present, this component will make a GET request to the href value when the user hovers over the link.

<Link href="/about" rel="prefetch">About</Link>

Disabled state

Setting disabled to true will render a span element instead of an anchor tag.

<Link disabled href="https://github.com/">GitHub</Link>

<!-- <span>GitHub</span> -->

Active state

Set active to true to signal an active state.

If true, the anchor link is given an "active" class with the aria-current attribute set to "page."

<script>
  import { page } from "$app/stores";
</script>

<Link href="/" active={$page.url.pathname === "/"}>GitHub</Link>

<!-- <a href="/" class="active" aria-current="page">GitHub</a> -->

API

Props

Prop	Type	Default value
href	string	"javascript:void(0);"
disabled	boolean	false
outbound	boolean	undefined
target	string	undefined
rel	string	undefined
active	boolean	false

Forwarded events

• on:click
• on:mouseover
• on:mouseenter
• on:mouseout
• on:focus
• on:blur
• on:keydown

TypeScript Support

Svelte version 3.31 or greater is required to use this component with TypeScript.

TypeScript definitions are located in the types folder.

Changelog

Changelog

License

MIT

svelte-link's Issues

Feature Request: .active class on route match

A regular use-case for a generic Link component is simply to add an .active (most common) class for styling differences, indication of navigation, etc, rather than adding that logic to each link's implementation code.

If you added that automatic injection when a route prefix matches (for deep navigation) with an exact modifier to force a full path match, that would be awesome...

<Link href="/about">About</Link>
<!-- when viewed at "/about/somewhere" should render: -->
<a href="/about" class="active">About</Link>

<Link href="/about" exact>About</Link>
<!-- when viewed at "/about/somewhere" should render: -->
<a href="/about">About</Link>

Just a suggestion!

[feature] Default outbound to true if `href` points to an external url

Hey just a small feature request — it would be great if the default for outbound was a little smarter, and defaulted to true if href is an external URL, which the user can easily override with outbound={false} to force all links to be same-target.

This would be especially useful if you don't have control over the href, for example in content from a CMS, where you want external links to automatically be outbound.

Happy to submit a PR if you're open to it

Will this be updated to fix WARNING "svelte field in their package.json"

Will this be updated to fix WARNING "svelte field in their package.json"?

Type declaration should use new `SvelteComponentTyped` base class

When importing svelte-link into a typescript project, it gives the following error (at least in VS Code):

JSX element class does not support attributes because it does not have a '$$prop_def' property

Using the new SvelteComponentTyped base class in Link.d.ts fixes the issue, but not sure if this should be a PR here or against sveld

export default class Link extends SvelteComponentTyped<LinkProps> {}