csilva2810 / Notifier
Notifications library made with VanillaJS.
Stars: ✭ 67
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Notifier
Jsontreeviewer
json formatter/viewer/pretty-printer (with jsonTree javascript-library)
Stars: ✭ 211 (+214.93%)
Mutual labels: library, vanilla-js
Bunny
BunnyJS - Lightweight native (vanilla) JavaScript (JS) and ECMAScript 6 (ES6) browser library, package of small stand-alone components without dependencies: FormData, upload, image preview, HTML5 validation, Autocomplete, Dropdown, Calendar, Datepicker, Ajax, Datatable, Pagination, URL, Template engine, Element positioning, smooth scrolling, routing, inversion of control and more. Simple syntax and architecture. Next generation jQuery and front-end framework. Documentation and examples available.
Stars: ✭ 473 (+605.97%)
Mutual labels: library, vanilla-js
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
Stars: ✭ 179,407 (+267671.64%)
Mutual labels: library, frontend
Bttn.css
Awesome buttons for awesome projects!
Stars: ✭ 2,004 (+2891.04%)
Mutual labels: library, frontend
Unicode Bidirectional
A Javascript implementation of the Unicode 9.0.0 Bidirectional Algorithm
Stars: ✭ 35 (-47.76%)
Mutual labels: library, frontend
Ivi
🔥 Javascript (TypeScript) library for building web user interfaces
Stars: ✭ 445 (+564.18%)
Mutual labels: library, frontend
Noty
⛔️ DEPRECATED - Dependency-free notification library that makes it easy to create alert - success - error - warning - information - confirmation messages as an alternative the standard alert dialog.
Stars: ✭ 6,725 (+9937.31%)
Mutual labels: library, notifications
Crab
JavaScript library for building user interfaces with Custom Elements, Shadow DOM and React like API
Stars: ✭ 22 (-67.16%)
Mutual labels: library, frontend
Layerjs
layerJS: Javascript UI composition framework
Stars: ✭ 1,825 (+2623.88%)
Mutual labels: library, frontend
Angular Tree Component
A simple yet powerful tree component for Angular (>=2)
Stars: ✭ 1,031 (+1438.81%)
Mutual labels: library, frontend
Chat Ui Kit React
Build your own chat UI with React components in few minutes. Chat UI Kit from chatscope is an open source UI toolkit for developing web chat applications.
Stars: ✭ 131 (+95.52%)
Mutual labels: library, frontend
Vuent
🎨 Vue.js components implementing Microsoft Fluent Design
Stars: ✭ 207 (+208.96%)
Mutual labels: library, frontend
Tsmessages
💌 Easy to use and customizable messages/notifications for iOS à la Tweetbot
Stars: ✭ 4,927 (+7253.73%)
Mutual labels: library, notifications
Webrix
Powerful building blocks for React-based web applications
Stars: ✭ 41 (-38.81%)
Mutual labels: library, frontend
Potato Library
Easy to use Utility library for Android
Stars: ✭ 45 (-32.84%)
Mutual labels: library, notifications
P5.clickable
Event driven, easy-to-use button library for P5.js 👆
Stars: ✭ 66 (-1.49%)
Mutual labels: library
Notifier
Notifications library made with VanillaJS.
Instalation
npm install notifier-js
Usage
Default Notifications
// my-script.js
import notifier from 'notifier-js'
notifier.show('Hello!' , 'I am a default notification.');
notifier.show('Reminder!', 'You have a meeting at 10:30 AM.');
notifier.show('Well Done!', 'You just submit your resume successfuly.');
notifier.show('Warning!' , 'The data presented here can be change.');
notifier.show('Sorry!', 'Could not complete your transaction.');
Notifications with icons
import notifier from 'notifier-js'
notifier.show('Default!' , 'I am a default notification.', '', 'img/clock-48.png', 0);
notifier.show('Reminder!', 'You have a meeting at 10:30 AM.', '', 'img/survey-48.png', 0);
notifier.show('Well Done!', 'You just submit your resume successfuly.', '', 'img/ok-48.png', 0);
notifier.show('Warning!' , 'The data presented here can be change.', '', 'img/medium_priority-48.png', 0);
notifier.show('Sorry!', 'Could not complete your transaction.', '', 'img/high_priority-48.png', 0);
Auto Dismissable Notifications
import notifier from 'notifier-js'
notifier.show('Default!' , 'I am a default notification.', '', 'img/clock-48.png', 4000);
notifier.show('Reminder!', 'You have a meeting at 10:30 AM.', '', 'img/survey-48.png', 4000);
notifier.show('Well Done!', 'You just submit your resume successfuly.', '', 'img/ok-48.png', 4000);
notifier.show('Warning!' , 'The data presented here can be change.', '', 'img/medium_priority-48.png', 4000);
notifier.show('Sorry!', 'Could not complete your transaction.', '', 'img/high_priority-48.png', 4000);
Programmatically closing a notification
import notifier from 'notifier-js'
let notificationId;
const showNotification = function () {
notificationId = notifier.show('Reminder!', 'You have a meeting at 10:30 AM.', '', 'img/survey-48.png', 4000);
};
const hideNotification = function () {
notifier.hide(notificationId);
};
document.querySelector('#show-button').addEventListener('click', showNotification);
document.querySelector('#hide-button').addEventListener('click', hideNotification);
Click here to se the complete usage reference.
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].