keenethics/ svelte-notifications

JavaScript

Svelte

HTML

CSS

svelte-components

Need help with svelte-notifications?

Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

keenethics

306 Stars

23 Forks

MIT License

101 Commits

16 Opened issues

Simple and flexible notifications system

Readme

Svelte notifications

Name: svelte-notifications
Brand: svelte-notifications
SKU: //keenethics/svelte-notifications
Rating: 2.515 (306 reviews)

Simple and flexible notifications system for Svelte 3

Demonstration

npm install --save svelte-notifications

// MainComponent.svelte

// ChildrenComponent.svelte



 addNotification({
    text: 'Notification',
    position: 'bottom-center',
  })}
>
  Add notification

// MainComponent.svelte

// CustomNotification.svelte




  {notification.heading}
  {notification.description}
  Close me

// AnotherComponent.svelte




  Show notification

Notifications

The

Notifications

component supplies descendant components with notifications store through context.

@prop {component}
```
[item=null]
```
- Custom notification component that receives the notification object
@prop {boolean}
```
[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:

@param {Object}
```
notification
```
- The object that will receive the notification component
@param {string}
```
[id=timestamp]
```
- Unique notification identificator
@param {string}
```
text
```
– Notification text

@param {string}

position

– One of these values:

top-left

top-center

top-right

bottom-left

bottom-center

bottom-right

@param {string}
```
type
```
– One of these values:
```
success
```
,
```
warning
```
,
```
danger
```
@param {number}
```
[removeAfter]
```
– After how much the notification will disappear (in milliseconds)

// ChildrenComponent.svelte

getNotificationsContext:removeNotification

// ChildrenComponent.svelte

getNotificationsContext:clearNotifications

// ChildrenComponent.svelte

getNotificationsContext:subscribe

Default Svelte subscribe method that allows interested parties to be notified whenever the store value changes