Svelte notifications store

This is a simple notifications store helping to use multiple categorized notifications.

You can copy/paste the code from src/index.js to your project's stores.js

Installation

npm i svelte-notifications-store

Usage example

<script>
    import { notifications } from "svelte-notifications-store";
    
    // Add a new notification
    const notification = {
        type: 'cart',
        content: 'Notification test'
    }
    notifications.add(
        notification, // Notification to add.
        true, // We need to add `new` field.
        5000 // We want to remove `new` field after 5 seconds.
    )
</script>

 <!-- show notifications -->
{#if notifications.count('cart')}
    <ul>
        {#each $notifications as notification}
            {#if notification.new}
                <div class="notification">{notification.content}</div>
            {/if}
        {/each}
    </ul>
{/if}

The notifications store

Store methods

Subscribe

notifications.subscribe() refer to the svelte store's subscribe method

Returns an array containing your notifications :

$notifications = {
    // Custom notification type
    type: 'cart',
    
    // This notification is set to `new` using the `add()` method
    new: true, // It can be manualy set to false if `add()` doesn't trigger a timer
    
    // You can use any other parameters in your notifications
    content: 'Notification test',
}

Add

notifications.add() This method add a new notification to the store

import { notifications } from "svelte-notifications-store";

// Add a new notification
const notification = {
    type: 'cart',
    content: 'Notification test'
}
notifications.add(
    notification, // Notification to add.
    true, // We need to add `new` field.
    5000 // We want to remove `new` field after 5 seconds.
)

Count

notifications.count() This method count notifications in the store, result can be filtered by type

    /* ...Import store and add notification ... */

    // Count notifications
    const countAll = notifications.count()
    const count = notifications.count('cart')

countAll returns the total Number of notifications

count returns the Number of notifications that have type = cart

Remove

notifications.remove(key) This method remove one notification by its array key

    /* ...Import store and add notification ... */

    // Get last notification key (length - 1)
    const lastNotifId = notifications.count() - 1

    // Remove the notification
    const countAll = notifications.remove(lastNotifId)

Remove All notifiations

notifications.removeAll() This method remove all notifications from the store

    /* ...Import store and add notification ... */

    // Remove the notification
    const countAll = notifications.removeAll()