Svelte-link NPM

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`