Svelte Toast

Theme by Zerodevx

|

Updated: 21 Sep 2024

|

872 Stars

Simple elegant toast notifications

Categories

Overview

npm (scoped) is a simple and elegant toast notification component for modern web frontends. It is lightweight and well-tested, with only 20kB minified and 8kB gzipped. It can be used with Vanilla JS or as a Svelte component.

Features

• Supporting Multiple Toast Containers: Send toasts to different container targets within your app.
• Removing Multiple Toasts (Outdated): Deprecated feature for backward compatibility.
• Accepting Object as First Param: push() and set() functions can also take an object as the first parameter.
• Pausable Toasts: Progress bar tweens can be paused when the mouse cursor hovers over the toast item.
• Send Svelte Component as a Message: Push a Svelte component instead of a standard message.
• onpop() Callback Function: Run a callback function when a toast is closed.
• Styling with User-Defined Classes: Pass custom class names to each toast item.

Installation

To install the npm (scoped) package, use the following command:

npm install svelte-toast

For Svelte apps, import the toast container and place it in your app shell or root layout. For Vanilla JS, include the necessary scripts in your HTML. Custom theming can be done using CSS variables.

Summary

npm (scoped) is a lightweight and feature-rich toast notification component for modern web frontends. It can be easily installed and used with Vanilla JS or as a Svelte component. With support for multiple toast containers, pausable toasts, and the ability to send Svelte components as messages, it provides a flexible and customizable solution for displaying toast notifications on web applications.