linkify-svelte
A Svelte 5 component wrapper for LinkifyJS that automatically converts URLs, emails, and hashtags in your text into clickable links.
This library inspired by linkify-react
Installation
npm install linkify-svelte linkifyjs
# or
pnpm add linkify-svelte linkifyjs
bun add linkify-svelte linkifyjs
Usage
Basic Usage
<script>
import Linkify from 'linkify-svelte';
</script>
<Linkify text="Check out https://example.com or email us at [email protected]" />
With Options
You can pass LinkifyJS options to customize behavior:
<script>
import Linkify from 'linkify-svelte';
</script>
<Linkify
text="Visit https://example.com"
options={{
target: '_blank',
rel: 'noopener noreferrer',
className: 'my-link-class'
}}
/>
Custom Rendering
Use the render snippet for full control over link rendering:
<script>
import Linkify from 'linkify-svelte';
</script>
<Linkify text="Check out https://example.com">
{#snippet render({ tagName, attributes, content })}
<a {...attributes} class="custom-link">
{content}
</a>
{/snippet}
</Linkify>
Props
| Prop | Type | Description |
|---|---|---|
text |
string |
The text to linkify |
options |
Omit<Opts, 'events'> |
LinkifyJS options (optional) |
render |
Snippet |
Custom render snippet for links (optional) |
Requirements
- Svelte 5.0.0+
- LinkifyJS 4.3.2+
License
MIT
