Svelte notifications
Simple and flexible notifications system for Svelte 3
Demonstration
https://svelte-notifications.netlify.com
Getting started
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>
API
Notifications
The Notifications component supplies descendant components with notifications store through context.
- @prop {component}
[item=null]- Custom notification component that receives the notification object - @prop {boolean}
[withoutStyles=false]- If you don't want to use the default styles, this flag will remove the classes to which the styles are attached - @prop {string|number}
[zIndex]- Adds a style with z-index for the notification container
// MainComponent.svelte
<script>
import Notifications from 'svelte-notifications';
import App from './App.svelte';
</script>
<Notifications>
<App />
</Notifications>
getNotificationsContext
A function that allows you to access the store and the functions that control the store.
// ChildrenComponent.svelte
<script>
import { getNotificationsContext } from 'svelte-notifications';
const notificationsContext = getNotificationsContext();
const {
addNotification,
removeNotification,
clearNotifications,
subscribe,
} = notificationsContext;
</script>
getNotificationsContext:addNotification
You can provide any object that the notification component will receive. The default object looks like this:
- @param {Object}
notification- The object that will receive the notification component - @param {string}
[id=timestamp-rand]- Unique notification identificator - @param {string}
text– Notification text - @param {string}
[position=bottom-center]– One of these values:top-left,top-center,top-right,bottom-left,bottom-center,bottom-right - @param {string}
type– One of these values:success,warning,error - @param {number}
[removeAfter]– After how much the notification will disappear (in milliseconds)
// ChildrenComponent.svelte
<script>
import { getNotificationsContext } from 'svelte-notifications';
const { addNotification } = getNotificationsContext();
addNotification({
id: 'uniqNotificationId',
text: 'Notification',
position: 'top-center',
type: 'success',
removeAfter: 4000,
...rest,
});
</script>
getNotificationsContext:removeNotification
- @param {string}
id- Unique notification identificator
// ChildrenComponent.svelte
<script>
import { getNotificationsContext } from 'svelte-notifications';
const { removeNotification } = getNotificationsContext();
removeNotification('uniqNotificationId');
</script>
getNotificationsContext:clearNotifications
// ChildrenComponent.svelte
<script>
import { getNotificationsContext } from 'svelte-notifications';
const { clearNotifications } = getNotificationsContext();
clearNotifications();
</script>
getNotificationsContext:subscribe
Default Svelte subscribe method that allows interested parties to be notified whenever the store value changes
Contributing
Read more about contributing here