Sliding Toaster & Snackbar In JavaScript – toastnotify

Preview:

Description:

toastnotify is a tiny notification plugin to create Google-style toasts and snackbars sliding from the left side of the screen when triggered.

How to use it:

1. Import the stylesheet toastnotify.css and JavaScript toastnotify.js into the HTML page.

<link rel="stylesheet" href="./src/css/toastnotify.css" />
<script src="./src/js/toastnotify.js"></script>

2. Show a basic toast notification on the page.

Toastnotify.create({
  text: "Notification Message Here"
});

3. Show a snackbar with custom actions on the page.

Toastnotify.create({
  text: "Notification Message Here",
  callbackOk:()=>{
    console.log('OK');
  },
  callbackCancel:()=>{
    console.log('Cancel');
  }
});

4. Change the default theme. All possible themes:

• dark
• default
• primary
• info
• warning
• danger
• success
• secondary
• pink

Toastnotify.create({
  text: "Notification Message Here",
  type: 'dark',
  callbackOk:()=>{
    console.log('OK');
  },
  callbackCancel:()=>{
    console.log('Cancel');
  }
});

5. Customize the label text.

Toastnotify.create({
  text:"CSSSCRIPT.COM",
  type:'dark',
  buttonCancel:'Cancel',
  buttonOk: 'OK',
  important:true,
  callbackOk:()=>{
    console.log('Precionado OK');
  },
  callbackCancel:()=>{
    console.log('Precionado Cancelado');
  }
});

6. Override the default animations.

Toastnotify.create({
  text:"CSSSCRIPT.COM",
  type:'dark',
  animationIn:'fadeInLeft',
  animationOut:'fadeOutLeft'
});

7. Specify a duration if you’d like to dismiss the notification automatically.

Toastnotify.create({
  text:"CSSSCRIPT.COM",
  duration:5000
});