Svelte notifications

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>