Create Android-style Toasts And Notification Bars With Pure JavaScript – native-toast

native-toast is a native JavaScript library which lets you display Android/Material style toast messages and notification bars on the web applications. The toast notification can be placed anywhere on the webpage and come with 4 additional types: error, warning, success and info.

Basic usage:

Install the native-toast via package managers.

# Yarn
yarn add native-toast
# NPM
npm install native-toast

Or directly include the following files in your document.

<link rel="stylesheet" href="native-toast.css">
<script src="native-toast.js"></script>

Create a default toast notification that displays on the top of the webpage and auto dismiss itself after 5 seconds.

nativeToast({
  message: 'Toast Notification',
  position: 'top',
  timeout: 5000
})

Create a notification bar that stays at the bottom of the webpage.

nativeToast({
  message: 'Notification bar',
  edge: true,
  position: 'bottom'
})

Create a warning toast notification that displays in the middle of the screen.

nativeToast({
  message: 'Toast Notification',
  type: 'warning' // success warning info error
})

Set the border-radius:

nativeToast({
  message: 'Toast Notification',
  square: true // true or false
})

Changelog:

v2.0.0 (09/20/2018)

• Update