Pure JS, HTML, and CSS Notifications with a great look – Live demo
npm install --save naranja
<script src="https://unpkg.com/naranja@1.0.1/lib/naranja.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/naranja@1.0.1/lib/naranja.min.css">
npm i -s naranja
// script
import naranja from 'naranja'
// styles
import '~/naranja/lib/naranja.min.css'
For first, why naranja? ... because all cool names in npm are taken, yes, and is easy to remember (it's orange in English).
naranja().log({
title: 'Notification Title', // <- required
text: 'Here goes a description for notifiaction', // <- required
icon: true or false, // <- unrequired, default true,
timeout: 2000 or 'keep', // <- unrequired, default 5000 miliseconds
buttons: [
{
text: 'OK',
click: function (e) {
// click event close notifiaction
// unless you use preventClose method
e.preventClose()
// if you want close notifiaction
// manually, use closeNotification
e.closeNotification()
}
},
{
text: 'Cancel',
click: function () {
// make something here...
// you can (but you should not)
// add infinity buttons
}
}
]
})more notifiactions
naranja().log({ ...
naranja().success({ ...
naranja().warn({ ...
naranja().error({ ...All methods need the same arguments