beyonk-adventures / Svelte Notifications

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.