svelte-link

[![NPM][npm]][npm-url]

> Anchor link component for Svelte.

Installation

``bash


npm

npm i -D svelte-link

pnpm

pnpm i -D svelte-link

Bun

bun i -D svelte-link

Yarn

yarn add -D svelte-link
`

Usage

$3

`svelte


GitHub
`

$3

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

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

`

$3

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.

`svelte
GitHub


GitHub

`

$3

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.

`svelte
About
`

$3

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

`svelte
GitHub


`

$3

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

`svelte no-eval


GitHub


`

API

$3

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

$3

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

Changelog

Changelog

License

MIT

[npm]: https://img.shields.io/npm/v/svelte-link?style=for-the-badge&color=%23ff3e00
[npm-url]: https://npmjs.com/package/svelte-link