README

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>
<!-- is the 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

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> -->

API

Props

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

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

License

MIT

Usage no npm install needed!