Simple and flexible notifications system
Simple and flexible notifications system for Svelte 3
https://svelte-notifications.netlify.com
npm install --save svelte-notifications
// MainComponent.svelte
// ChildrenComponent.svelteaddNotification({ text: 'Notification', position: 'bottom-center', })} > Add notification
// MainComponent.svelte
// CustomNotification.svelte{notification.heading}
{notification.description}
Close me
// AnotherComponent.svelteShow notification
Notifications
The
Notificationscomponent supplies descendant components with notifications store through context.
[item=null]- Custom notification component that receives the notification object
[withoutStyles=false]- If you don't want to use the default styles, this flag will remove the classes to which the styles are attached
// MainComponent.svelte
getNotificationsContext
A function that allows you to access the store and the functions that control the store.
// ChildrenComponent.svelte
getNotificationsContext:addNotification
You can provide any object that the notification component will receive. The default object looks like this:
notification- The object that will receive the notification component
[id=timestamp]- Unique notification identificator
text– Notification text
position– One of these values:
top-left,
top-center,
top-right,
bottom-left,
bottom-center,
bottom-right
type– One of these values:
success,
warning,
danger
[removeAfter]– After how much the notification will disappear (in milliseconds)
// ChildrenComponent.svelte
getNotificationsContext:removeNotification
id- Unique notification identificator
// ChildrenComponent.svelte
getNotificationsContext:clearNotifications
// ChildrenComponent.svelte
getNotificationsContext:subscribe
Default Svelte subscribe method that allows interested parties to be notified whenever the store value changes