All Projects → keenethics → Svelte Notifications

keenethics / Svelte Notifications

Licence: mit
Simple and flexible notifications system

Programming Languages

javascript
184084 projects - #8 most used programming language

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 Vscode
Svelte language support for VS Code
Stars: ✭ 211 (-2.76%)
Mutual labels:  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
Hawkeye
A useful app for GitHub Notifications
Stars: ✭ 193 (-11.06%)
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
Markuplint
A Linter for All Markup Languages.
Stars: ✭ 193 (-11.06%)
Mutual labels:  svelte
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
Ui
🏁🌐 Frontend Svelte PWA starter for SaaS startups
Stars: ✭ 200 (-7.83%)
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

build version license

Simple and flexible notifications system for Svelte 3

Svelte Notifications

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].