keenethics / Svelte Notifications
Licence: mit
Simple and flexible notifications system
Stars: ✭ 217
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Svelte Notifications
Svelte Notifications
Svelte toast notifications component that can be used in any JS application
Stars: ✭ 146 (-32.72%)
Mutual labels: notifications, svelte
Svelte Awesome
Awesome SVG icon component for Svelte JS, built with Font Awesome icons. Based on Justineo/vue-awesome
Stars: ✭ 193 (-11.06%)
Mutual labels: svelte
Svelte Storybook Tailwind
A starter template for Svelte, TailwindCSS and Storybook. You can easily start your project with this template, instead of wasting time figuring out configurations for each integration.
Stars: ✭ 204 (-5.99%)
Mutual labels: svelte
Apns Http2
A Java library for sending notifications via APNS using Apple's HTTP/2 API.
Stars: ✭ 194 (-10.6%)
Mutual labels: notifications
Electron Windows Notifications
⚡️ Send native Windows WinRT notifications from Electron
Stars: ✭ 206 (-5.07%)
Mutual labels: notifications
Notica
Send browser notifications from your terminal. No installation. No registration.
Stars: ✭ 215 (-0.92%)
Mutual labels: notifications
Svelte Component Template
A base for building shareable Svelte 3 components
Stars: ✭ 208 (-4.15%)
Mutual labels: svelte
Awesome Svelte
⚡ A curated list of awesome Svelte resources
Stars: ✭ 204 (-5.99%)
Mutual labels: svelte
Notify Send.sh
drop-in replacement for notify-send with more features
Stars: ✭ 200 (-7.83%)
Mutual labels: notifications
Sveltesociety.dev
Community website for Svelte Society. The site will contain a component library list, a cookbook, tutorials, event information, talks etc.
Stars: ✭ 199 (-8.29%)
Mutual labels: svelte
React Native In App Notification
🔔 Customisable in-app notification component for React Native
Stars: ✭ 206 (-5.07%)
Mutual labels: notifications
Bugsnag Ruby
Bugsnag error monitoring & reporting software for rails, sinatra, rack and ruby
Stars: ✭ 211 (-2.76%)
Mutual labels: notifications
Svelte Nodegui
Build performant, native and cross-platform desktop applications with native Svelte + powerful CSS-like styling.🚀
Stars: ✭ 2,598 (+1097.24%)
Mutual labels: svelte
Uptime Monitor App
A PHP application to monitor uptime and ssl certificates
Stars: ✭ 205 (-5.53%)
Mutual labels: notifications
Laravel Slack Slash Command
Make a Laravel app respond to a slash command from Slack
Stars: ✭ 215 (-0.92%)
Mutual labels: notifications
Parcel Plugin Svelte
A parcel plugin that enables svelte support
Stars: ✭ 214 (-1.38%)
Mutual labels: svelte
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>
let notification = {};
// `onRemove` function will be passed into your component.
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
// 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]
- Unique notification identificator -
@param {string}
text
– Notification text -
@param {string}
position
– 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
,danger
-
@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: 'bottom-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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].