svelte-notifications

Svelte notifications

Simple and flexible notifications system for Svelte 3

Demonstration

https://svelte-notifications.netlify.com

Getting started

npm install --save svelte-notifications

Basic usage

// MainComponent.svelte

<script>
  import Notifications from 'svelte-notifications';

  import App from './App.svelte';
</script>

<Notifications>
  <App />
</Notifications>

// ChildrenComponent.svelte

<script>
  import { getNotificationsContext } from 'svelte-notifications';

  const { addNotification } = getNotificationsContext();
</script>

<button
  on:click={() => addNotification({
    text: 'Notification',
    position: 'bottom-center',
  })}
>
  Add notification
</button>

Providing custom notification component

// MainComponent.svelte

<script>
  import Notifications from 'svelte-notifications';
  import CustomNotification from './CustomNotification.svelte';

  import App from './App.svelte';
</script>

<Notifications item={CustomNotification}>
  <App />
</Notifications>

// CustomNotification.svelte

<script>
  export let notification = {};
  // `onRemove` function will be passed into your component.
  export let onRemove = null;

  const handleButtonClick = () => {
    onRemove();
  }
</script>

<div class={notification.type === 'error' ? 'error' : ''}>
  <h4>{notification.heading}</h4>
  <p>{notification.description}</p>
  <button on:click={handleButtonClick}>Close me</button>
</div>

// AnotherComponent.svelte

<script>
  import { getNotificationsContext } from 'svelte-notifications';

  const { addNotification } = getNotificationsContext();

  const handleButtonClick = () => {
    addNotification({
      position: 'bottom-right',
      heading: 'hi i am custom notification',
      type: 'error',
      description: 'lorem ipsum',
    });
  }
</script>

<div>
  <button on:click={handleButtonClick}>Show notification</button>
</div>

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
• @prop {string|number} [zIndex] - Adds a style with z-index for the notification container

// MainComponent.svelte

<script>
  import Notifications from 'svelte-notifications';

  import App from './App.svelte';
</script>

<Notifications>
  <App />
</Notifications>

getNotificationsContext

A function that allows you to access the store and the functions that control the store.

// ChildrenComponent.svelte

<script>
  import { getNotificationsContext } from 'svelte-notifications';

  const notificationsContext = getNotificationsContext();

  const {
    addNotification,
    removeNotification,
    clearNotifications,
    subscribe,
  } = notificationsContext;
</script>

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-rand] - Unique notification identificator
• @param {string} text – Notification text
• @param {string} [position=bottom-center] – 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, error
• @param {number} [removeAfter] – After how much the notification will disappear (in milliseconds)

// ChildrenComponent.svelte

<script>
  import { getNotificationsContext } from 'svelte-notifications';

  const { addNotification } = getNotificationsContext();

  addNotification({
    id: 'uniqNotificationId',
    text: 'Notification',
    position: 'top-center',
    type: 'success',
    removeAfter: 4000,
    ...rest,
  });
</script>

getNotificationsContext:removeNotification

• @param {string} id - Unique notification identificator

// ChildrenComponent.svelte

<script>
  import { getNotificationsContext } from 'svelte-notifications';

  const { removeNotification } = getNotificationsContext();

  removeNotification('uniqNotificationId');
</script>

getNotificationsContext:clearNotifications

// ChildrenComponent.svelte

<script>
  import { getNotificationsContext } from 'svelte-notifications';

  const { clearNotifications } = getNotificationsContext();

  clearNotifications();
</script>

getNotificationsContext:subscribe

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

Contributing

Read more about contributing here