Framework Agnostic Toast Notification Library – js-toaster

Preview:

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
})