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