Svelte Sonner

Overview:

The Svelte Sonner is an opinionated toast component for Svelte, based on emilkowalski’s React implementation. It provides a quick and easy way to display toast notifications in your Svelte application.

Features:

• Default toast: Displays a basic toast message that can be customized by passing an options object.
• Success toast: Renders a checkmark icon in front of the message.
• Info toast: Renders a question mark icon in front of the message.
• Warning toast: Renders a warning icon in front of the message.
• Error toast: Renders an error icon in front of the message.
• Action toast: Renders a button in the toast.
• Promise toast: Starts in a loading state and automatically updates after the promise resolves or fails.
• Custom component toast: Allows you to pass a custom component to be rendered as a toast while maintaining default styling.
• Updating a toast: Allows you to update a toast by using the toast function and passing it the toast id.
• Customization options: Provides various customization options such as headless toasts, theme customization, position customization, etc.
• Programmatically remove toast: Allows you to programmatically remove a toast using the toast.dismiss() method.
• Duration customization: Allows you to change the duration of each toast individually or all toasts globally.
• Callback functions: Supports onDismiss and onAutoClose callbacks for handling toast dismissal events.
• Keyboard focus: Allows you to focus on the toast area by pressing ⌥/alt + T.

Installation:

To install Svelte Sonner, follow these steps:

1. Add the following code snippet to your Svelte application:

import { Toaster } from 'svelte-sonner';

// Add <Toaster /> to your app

2. Customize the toast component based on your requirements by passing options objects, custom icons, or descriptions as arguments to the toast() function.
3. Use the various customization options provided by Svelte Sonner to customize the appearance and behavior of the toast notifications according to your preferences.

Summary:

Svelte Sonner is a versatile and customizable toast component for Svelte. It allows you to easily display toast notifications in your Svelte application with various customization options. With features like different toast types, custom component support, update functionality, and programmatically removing toasts, Svelte Sonner provides a comprehensive solution for handling toast notifications in a Svelte project.