@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