Svelte Notifications
Svelte Notifications component
- v3 compatible
- uses stores for completely hassle free operation
Demo
A Demo of this component is available.
Usage
npm i -D @beyonk/svelte-notifications
<NotificationDisplay />
<button on:click={someFunction}>Show message</button>
<script>
import { NotificationDisplay, notifier } from '@beyonk/svelte-notifications'
function someFunction () {
notifier.success('Notifications work!')
}
</script>
Notification types
You can call multiple types of notification:
notifier.show('danger', message, displayTimeMs)
notifier.danger(message, displayTimeMs),
notifier.warning(message, displayTimeMs),
notifier.info(message, displayTimeMs),
notifier.success(message, displayTimeMs)
Notification themes
You can customise the themes:
<NotificationDisplay {themes} />
<button on:click={someFunction}>Show message</button>
<script>
import { NotificationDisplay, notifier } from '@beyonk/svelte-notifications'
let themes = { // These are the defaults
danger: '#bb2124',
success: '#22bb33',
warning: '#f0ad4e',
info: '#5bc0de',
default: '#aaaaaa' // relates to simply '.show()'
}
function someFunction () {
notifier.success('Notifications work!')
}
</script>
Custom types
<NotificationDisplay {themes} />
<button on:click={someFunction}>Show message</button>
<script>
import { NotificationDisplay, notifier } from '@beyonk/svelte-notifications'
let themes = {
myColour: '#ff00bb'
}
function someFunction () {
notifier.send('myColour', 'Notifications work!')
}
</script>
Timeouts
You can set a default timeout:
<NotificationDisplay {timeout} />
<button on:click={someFunction}>Show message</button>
<script>
import { NotificationDisplay, notifier } from '@beyonk/svelte-notifications'
let timeout = 3000 // The default
function someFunction () {
notifier.success('Notifications work!')
}
</script>
Custom timeout:
You can set a timeout per message
<NotificationDisplay />
<button on:click={someFunction}>Show message</button>
<script>
import { NotificationDisplay, notifier } from '@beyonk/svelte-notifications'
function someFunction () {
notifier.success('Notifications work!', 5000) // built in theme
notifier.send('custom-theme', 'Notifications work!', 5000) // custom theme
}
</script>
Credits
- Original code by Antony Jones
- Animation and performance improvements by jg.