0.1.5 • Published 9 months ago
@whizzes/svelte-notifications v0.1.5
Getting Started
To use the Svelte Notifications library in your Svelte application, you can install it using npm:
npm install @whizzes/svelte-notifications
Example
<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>
Usage
Import the NotificationList
component and use Svelte's Slot Props to
consume a Notification's data.
import { NotificationList, notifications } from '@whizzes/svelte-notifications';
Provide the NotificationList component
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>
Push a notification
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!');
Development
git clone git@github.com:whizzes/svelte-notifications.git
cd ./svelte-notifications
npm i
npm run dev
Contributing
Feel free to open pull requests or issues on our GitHub Repository.