Lightweight Toast Notificaiton Components – ToastLibrary

Preview:

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