To use the Svelte Notifications library in your Svelte application, you can install it using npm:
npm install @whizzes/svelte-notifications
<script lang="ts">
import {
NotificationList,
notifications,
Position
} from '@whizzes/svelte-notifications';
const success = () => {
notifications.notifySuccess('Hello World!');
};
</script>
<button on:click="{success}">Append Success</button>
<!-- Notifications provider -->
<NotificationList position="{Position.BottomRight}" let:notification>
<li>
<strong>{notification.title}</strong>
<p>{notification.message}</p>
</li>
</NotificationList>
Import the NotificationList
component and use Svelte's Slot Props to
consume a Notification's data.
import { NotificationList, notifications } from '@whizzes/svelte-notifications';
The NotificationList component is the container of the notifications. It should be placed at the layout of your application, so it can be visible in all the pages.
You can set the position of the notifications by passing the position
prop to the NotificationList component. The available positions are the following using the Position
enum:
Position.TopLeft
Position.TopCenter
Position.TopRight
Position.BottomLeft
<script>
import { NotificationList, Position } from '@whizzes/svelte-notifications';
</script>
<NotificationList position="{Position.BottomRight}" let:notification>
<!-- Your notifications template -->
<li>
<strong>{notification.title}</strong>
<p>{notification.message}</p>
</li>
</NotificationList>
To add a notification, you can use some of the methods available in the notifications
object.
import { notifications } from '@whizzes/svelte-notifications';
// Add a success notification
notifications.notifySuccess('Hello World!');
// Add an error notification
notifications.notifyError('Hello World!');
// Add a warning notification
notifications.notifyWarning('Hello World!');
git clone [email protected]:whizzes/svelte-notifications.git
cd ./svelte-notifications
npm i
npm run dev
Feel free to open pull requests or issues on our GitHub Repository.