Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/metonym/svelte-link
Link component for Svelte
https://github.com/metonym/svelte-link
link noopener noreferrer svelte svelte-component typescript-definitions
Last synced: 11 days ago
JSON representation
Link component for Svelte
- Host: GitHub
- URL: https://github.com/metonym/svelte-link
- Owner: metonym
- License: mit
- Created: 2020-04-16T12:59:33.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-08-14T03:52:27.000Z (3 months ago)
- Last Synced: 2024-10-20T12:18:55.748Z (18 days ago)
- Topics: link, noopener, noreferrer, svelte, svelte-component, typescript-definitions
- Language: Svelte
- Homepage: https://metonym.github.io/svelte-link/
- Size: 368 KB
- Stars: 10
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
### Basic
```svelte
import Link from "svelte-link";
GitHub
```
### 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.
```svelte
{
e.preventDefault();
}}
>
GitHub
```
### Outbound links
`outbound` is an alias for setting `target="_blank"`. If `rel` is not specified for outbound links, [`rel="noopener noreferrer"` is set](https://developers.google.com/web/tools/lighthouse/audits/noopener).
`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
```
### Prefetch
Inspired by [Sapper](https://sapper.svelte.dev/docs#prefetch_href), 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
```
### Disabled state
Setting `disabled` to `true` will render a `span` element instead of an anchor tag.
```svelte
GitHub
```
### 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."
```svelte no-eval
import { page } from "$app/stores";
GitHub
```
## 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
## Changelog
[Changelog](CHANGELOG.md)
## License
[MIT](LICENSE)
[npm]: https://img.shields.io/npm/v/svelte-link?style=for-the-badge&color=%23ff3e00
[npm-url]: https://npmjs.com/package/svelte-link