Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/beyonk-adventures/svelte-notifications
Svelte toast notifications component that can be used in any JS application
https://github.com/beyonk-adventures/svelte-notifications
beyonk notifications svelte svelte-components toast toastr vanillajs
Last synced: 4 days ago
JSON representation
Svelte toast notifications component that can be used in any JS application
- Host: GitHub
- URL: https://github.com/beyonk-adventures/svelte-notifications
- Owner: beyonk-group
- Created: 2018-11-23T01:01:14.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-10-06T18:11:46.000Z (about 1 year ago)
- Last Synced: 2024-10-29T18:05:49.168Z (about 2 months ago)
- Topics: beyonk, notifications, svelte, svelte-components, toast, toastr, vanillajs
- Language: Svelte
- Size: 383 KB
- Stars: 310
- Watchers: 4
- Forks: 24
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-svelte - svelte-notifications - Toast notifications component that can be used in any JS application. (UI Components / Notification)
README
## Svelte Notifications
[](http://standardjs.com) [](https://svelte.dev)
Svelte Notifications component
* Uses SvelteKit 🎉
* v3 compatible
* Uses stores for completely hassle free operation
* Can persist across full page reloads!
## Demo
A [Demo of this component](https://svelte.dev/repl/dd506c546df84c1994a5ae9928ad23b1) is available.
Alternatively, check the project out from github and `npm run dev`.
## Usage
```bash
npm i -D @beyonk/svelte-notifications
```
```svelte
Show message
import { NotificationDisplay, notifier } from '@beyonk/svelte-notifications'
function someFunction () {
notifier.success('Notifications work!')
}
```
### Notification types
You can call multiple types of notification:
```js
const options = {
timeout: 3000, // milliseconds
persist: false, // automatic timeout (ignores above)
showProgess: true, // Show (or Hide) the progress bar
icon: null // Add svelte component to render an icon
}
notifier.show('danger', message, options)
notifier.danger(message, options),
notifier.warning(message, options),
notifier.info(message, options),
notifier.success(message, options)
```
### Persisting across apps
Your notifications can persist across multiple apps / page reloads, as long as they use this library. This is useful for a scenario where you show a notification and then redirect the browser to a different application, or trigger a full reload of the page.
This is completely automatic and uses session storage.
To ensure that notifications don't persist across apps where they should not, set the `sessionKey` attribute to something unique to each app.
```svelte
```
### Notification themes
You can customise the themes:
```svelte
Show message
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!')
}
```
##### Custom types
```svelte
Show message
import { NotificationDisplay, notifier } from '@beyonk/svelte-notifications'
let themes = {
myColour: '#ff00bb'
}
function someFunction () {
notifier.send('myColour', 'Notifications work!')
}
```
#### Timeouts
You can set a default timeout:
```svelte
Show message
import { NotificationDisplay, notifier } from '@beyonk/svelte-notifications'
let timeout = 3000 // The default
function someFunction () {
notifier.success('Notifications work!')
}
```
##### Custom timeout:
You can set a timeout per message
```svelte
Show message
import { NotificationDisplay, notifier } from '@beyonk/svelte-notifications'
function someFunction () {
notifier.success('Notifications work!', { timeout: 5000 }) // built in theme
notifier.send('custom-theme', 'Notifications work!', { timeout: 5000 }) // custom theme
}
```
##### Show Progress:
You can show or hide the progress bar per message
```svelte
Show message
import { NotificationDisplay, notifier } from '@beyonk/svelte-notifications'
function someFunction () {
notifier.success('Notifications work!', { showProgress: false }) // built in theme
notifier.send('custom-theme', 'Notifications work!', { showProgress: true }) // custom theme
}
```
##### Persist
You can make a message persist and never timeout, having a close button that the user can click to remove it.
```svelte
Show message
import { NotificationDisplay, notifier } from '@beyonk/svelte-notifications'
function someFunction () {
notifier.success('Notifications work!', { persist: true }) // built in theme
notifier.send('custom-theme', 'Notifications work!', { persist: true }) // custom theme
}
```
##### Icons
You can include custom svelte components to render icons (or anything).
```svelte
Show message
import { NotificationDisplay, notifier } from '@beyonk/svelte-notifications'
impoer Icon from 'somewhere/Icon.svelte'
function someFunction () {
notifier.success('Notifications work!', { icon: Icon })
}
// Icon.svelte
```
## Credits
* Original code by [Antony Jones](https://github.com/antony)
* Idea for persistent notifications by [Henrique Borges](https://github.com/henriquehbr)
* Animation and performance improvements by [Jonathan Greenemeier](https://github.com/6eDesign).