Github

Awesome

React, Angular, Vue, and Typescript compatible toast

# Features

  • Custom Position
  • Dark/Light Theme
  • Custom Style
  • Custom Markup
  • Update On Fly
  • User Event Detection
  • Custom Timeout
  • Manual Hiding
  • Callback After Hide
  • Responsive Design
  • Dynamic HTML
  • Lightweight
  • Zero Dependency

# Installation

> step 1 : you can use either npm or yarn, or import the main file with the script tag.

# npm

# yarn

# html (download the toast.js file from the src directory)

> step 2 : include the package in your code:

# npm and yarn

> step 3 : start making toasts!

# Position

You can position the toast by setting the position parameter:

# bottom(default)

# top

# Theme

The default theme is dark, but you can enable the light theme with the theme parameter:

# Custom Style

The Awesome Toast's html markup is equivalent to below:

So you can apply your custom style in a form of an array of classes:

# you can even add your custom markup (like the 'bold' class below)

# Timing

The default timeout for hiding is 4 seconds but you can customize it with the timeout parameter:

# Notice: when the waitForEvent is set to true, if an event happens after the timeout value after creating the Snackbar, the timeout value divides by two.

# For example, if the timeout value is 4 seconds and an event happens 3 seconds after the Snackbar is created, 4 seconds later the hide animation starts, but if that event happens 5 seconds after the Snackbar is created, the hide animation starts in 2 seconds.

Or you can set the timeout to zero so the auto-hide would be disabled (hiding would be available with the hide() function)

# click to hide

# Wait For Event

By default, a toast doesn't wait for any events to hide, but if you want to ensure that the user has seen your message, you can enable this feature with the waitForEvent parameter, so until the user does not interact with the page, the toast doesn't hide:

# Update On Fly

If you store the returned object from the new Toast() function, you can set some of its attributes after its created:

# create a simple toast

# update the text

# change the position

# change the theme

# change the style

# and hide

# After Hide

When the waitForEvent is set to true, the hide function is waiting for an event to start hiding timeout, so it may not occur exactly after the specified timeout after toast creation, so if you want to run a function after your toast hides, you can use the afterHide parameter for it: