Lightweight Toast Notificaiton Components – ToastLibrary

Category: Javascript , Notification | December 1, 2022
Author:satishborkar
Views Total:89 views
Official Page:Go to website
Last Update:December 1, 2022
License:MIT

Preview:

Lightweight Toast Notificaiton Components – ToastLibrary

Description:

A set of 2 lightweight and easy-to-use toast notification components written in ES 6.

Components Included:

  • ToastAnimation.js: Basic toast component
  • ToastPauseOnHoverPauseOnWindowFocusLoss.js: Auto pause on hover or when the window loses focus.

How to use it:

1. Download and import the toast component.

import Toast from "./ToastAnimation.js";
// OR
import Toast from "./ToastPauseOnHoverPauseOnWindowFocusLoss.js";

2. Import the necessary toast stylesheet.

<link rel="stylesheet" href="style.css" />

3. Create a default toast notification that will automatically dismiss itself after 5 seconds.

new Toast({
    text: `Hello World!`,
});

4. Override the default duration in ms.

new Toast({
    text: `Hello World!`,
    autoClose: 3000,
});

5. Set the position of the toast notification.

  • top-right (default)
  • top-left
  • top-center
  • bottom-right
  • bottom-left
  • bottom-center
new Toast({
    text: `Hello World!`,
    position: "top-right",
});

6. Determine whether to show a progress bar under the toast notification. Default: true.

new Toast({
    text: `Hello World!`,
    showProgress: false,
});

7. Determine if the toast notification is closeable. Default: true.

new Toast({
    text: `Hello World!`,
    canClose: false,
});

8. Trigger a function when the toast notification dismisses.

new Toast({
    text: `Hello World!`,
    onClose: () => {},
});

9. Determine whether to auto-pause the countdown.

new Toast({
    text: `Hello World!`,
    pauseOnHover: true,
    pauseOnFocusLoss: true,
});

You Might Be Interested In:


Leave a Reply