Framework Agnostic Toast Notification Library – js-toaster

Category: Javascript , Notification | June 12, 2022
Author:vnabet
Views Total:140 views
Official Page:Go to website
Last Update:June 12, 2022
License:MIT

Preview:

Framework Agnostic Toast Notification Library – js-toaster

Description:

A responsive, framework-agnostic toast notification library for Vanilla JavaScript.

You can write your custom logic to display any type of custom toast messages, and because it’s made to work with any framework, you can use it pretty much everywhere.

How to use it:

1. Install and download.

# NPM
$ npm i js-toaster

2. Import the js-toaster.

// As an ES module
import 'js-toaster/jsToaster.css'
import { jsToaster } from 'js-toaster';
// Browser
<link rel="stylesheet" href="jsToaster.css" />
<script type="module">
  import {jsToaster} from './jsToaster.min.js';
</script>

3. Display a basic toast message on the screen.

const myToast = jsToaster.toast('Toast Message Here');

4. Create a custom toast message by passing the following options to the toast method.

const myToast = jsToaster.toast({
      // toast message
      // required
      message: 'My notification text',
      // toast title
      title: 'My notification title',
      // URL or boolean
      link: '',
      // timeout in seconds
      displayTime: 20, 
      // dark mode or not
      dark: false,
      // 'topLeft' | 'topRight' | 'bottomRight' | 'bottomLeft'
      position: 'topRight',
      // 'info' | 'success' | 'warning' | 'danger'
      type: 'info',
      
});

5. Global configurations.

jsToaster.conf = {
  
  // timeout in seconds
  // 0 means permanent
  displayTime: 20,
  // enable dark mode
  dark: false,
  // 'topLeft' | 'topRight' | 'bottomRight' | 'bottomLeft'
  position: 'topRight',
  // 'info' | 'success' | 'warning' | 'danger'
  type: 'info',
  // margins
  marginTop: 0,
  marginBottom: 0,
  // position on mobile devices
  // 'top' | 'bottom'
  mobilePosition: 'bottom',
  // top or bottom margin on mobile devices 
  mobileMargin: undefined,
  
};

6. Event handlers.

jsToaster.onClickToast((id) => {
  // on click
});
jsToaster.onCloseToast((id) => {
  // on close
})

You Might Be Interested In:


Leave a Reply