Renderless Svelte

Back to docs


This is a straightforward Notification component consisting of two parts:

The queue

The queue is a readonly svelte store that exposes two additional functions:

Function Description
pop removes the first item on the queue
push adds an item to the end of the queue
import { notifications } from 'renderless-svelte'

notifications.push("Something happened")

The notification component

This component reacts to elements being added a queue and can be initialized with a timer to specify how long a notification should stay visible.

Property Description
payload will be the current item from the queue, this can be any kind of object, allowing for great flexibility in how the notifications will look like.
duration determines how long a notification should remain visible, default is 1000 (corresponding to one second)
on:notify fires if a new notification is being sent, event.detail will hold the same payload as payload
    import { Notification } from 'renderless-svelte'

<Notification let:payload duration="200">