svelte-link
v2.0.0
Published
Anchor link component for Svelte
Downloads
757
Maintainers
Readme
svelte-link
Anchor link component for Svelte.
Installation
# 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
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