sve
sveltoaste
npm i sveltoaste
sve

sveltoaste

Svelte toast notifications component that can be used in any JS application

by Manuel

2.1.4 (see all)TypeScript:Not FoundCategories:Svelte Toast
npm i sveltoaste
Readme

Beyonk Forked by marvinody

Svelte Notifications

js-standard-style CircleCI Svelte v2 Svelte v3

Svelte Notifications component

  • v3 compatible
  • uses stores for completely hassle free operation

Demo

A Demo of this component is available.

Usage

npm i -D sveltoaste
<NotificationDisplay />

<button on:click={someFunction}>Show message</button>

<script>
import { NotificationDisplay, notifier } from 'sveltoaste'

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 'sveltoaste'

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 'sveltoaste'

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 'sveltoaste'

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 'sveltoaste'

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.
  • marvinody - added close to the button to allow user to close before time expiration

Downloads/wk

3

GitHub Stars

0

LAST COMMIT

2yrs ago

MAINTAINERS

1

CONTRIBUTORS

4

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
2.1.4
latest
2yrs ago
No tutorials found
Add a tutorial