@svelte-put/noti

Type-safe and headless async notification builder

svelte-put

This package is part of the @svelte-put family. For contributing guideline and more, refer to its readme.

Usage & Documentation

See the dedicated documentation page here.

Quick Start

<script lang="ts">
  import { store, portal } from '@svelte-put/noti';

  // any Svelte component to render as notification
  import Notification from './Notification.svelte';

  // define somewhere global, reuse across app
  export const notiStore = store()
    // add a minimalistic variant config
    .variant('info', Notification)
    // add a verbose variant config
    .variant('special', {
      timeout: false,
      id: 'counter',
      component: Notification,
      props: {
        // inferred from Notification component
        special: true,
        content: 'A very special notification',
      },
    })
    // build the actual NotificationStore
    .build();

  onMount(async () => {
    // push a special notification
    const pushed = notiStore.push('special');

    // wait for some user action to resolve (pop) the notification
    const { userAction } = await pushed.resolve();

    // push another notification with custom props
    notiStore.push('info', {
      props: {
        content: 'An example information',
      },
    });
  });
</script>

<div use:portal="{notiStore}">
  <!-- notification instances rendered as direct children -->
</div>

Changelog