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.

About the developer

keenethics
214 Stars 16 Forks MIT License 88 Commits 14 Opened issues

Description

Simple and flexible notifications system

Services available

!
?

Need anything else?

Contributors list

Svelte notifications

build version license

Simple and flexible notifications system for Svelte 3

Svelte Notifications

Demonstration

https://svelte-notifications.netlify.com

Getting started

npm install --save svelte-notifications

Basic usage

// MainComponent.svelte




  

// ChildrenComponent.svelte



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

Providing custom notification component

// MainComponent.svelte




  

// CustomNotification.svelte



{notification.heading}

{notification.description}

Close me
// AnotherComponent.svelte



Show notification

API

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

  • @param {string}
    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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.