notifys
v1.0.10
Published
Simple js notifications
Downloads
14
Maintainers
Readme
Base usage
import {Notifier} from 'notifys';
const notifier = new Notifier('top-center')
notifier.error('Whoops. An error occurred.')
Extended usage
notifier.error({
title: 'Error',
message: '<span class="accent">Whoops.</span> An error occurred.',
pauseOnHover: true,
duration: 5000, // set to 0 to show notifications indefinitely
expand: true, // render expanded notification template
showProgress: true,
appearAnimation: 'backInLeft',
disappearAnimation: 'backOutLeft',
renderActions: function (close) {
const el = document.createElement('div')
el.classList.add('notify__actions')
const btn1 = document.createElement('button')
btn1.classList.add('btn-outline')
btn1.innerText = 'Ok, i got it'
const btn2 = document.createElement('button')
btn2.classList.add('btn-text')
btn2.innerText = 'Maybe later'
btn1.onclick = close
btn2.onclick = close
el.appendChild(btn1)
el.appendChild(btn2)
return el
}
})
Fire custom notification
const notification = new Notification({
classes: 'my-custom-notify',
duration: 0
})
notifier.notify(notification)
Manipulate notifications queue
notifier.setPosition('top-left') // set the position for the notification queue.
// Optionally one of the following values: top-left, top-center, top-right, bottom-left, bottom-center, bottom-right
notifier.removeFirst() // remove first notification
notifier.removeLast() // remove last notification
notifier.removeAll() // remove all notification
Notifications methods
notifier.info('Fire info notification template')
notifier.error('Fire error notification template')
notifier.warning('Fire warning notification template')
notifier.success('Fire success notification template')
notifier.simple('Fire base notification template')
Notification animations
Set the values of the appearAnimation/disappearAnimation properties of the options object to one of the animation classes provided by animate.css without the animate__ prefix
Demo
https://shelamkoff.github.io/notifys/