/svelte-notifications

Simple and flexible notifications system

Primary LanguageJavaScriptMIT LicenseMIT

build version license

Svelte notifications

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

<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