### Install svelte-sonner using package managers Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md Instructions on how to install the svelte-sonner package using npm, yarn, or pnpm. Choose your preferred package manager to add the dependency to your project. ```bash npm i svelte-sonner # or yarn add svelte-sonner # or pnpm add svelte-sonner ``` -------------------------------- ### Create a custom unstyled toast component in Svelte Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md Provides an example of a Svelte component designed for use with toast.custom(). It demonstrates how to dispatch a closeToast event to allow the toast system to close it. ```svelte
This is a custom component
``` -------------------------------- ### Customizing Toaster Hotkey (Svelte) Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md Shows how to change the default keyboard shortcut (⌥/alt + T) used to focus the toast area by providing an array of `event.code` values to the `hotkey` prop of the `` component. ```svelte ``` -------------------------------- ### Display a default toast with custom icon and description Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md Illustrates how to customize a default toast by adding a description and a custom Svelte component as an icon. Options are passed as the second argument to toast(). ```javascript import Icon from './Icon.svelte'; toast('Event has been created', { description: 'Monday, January 3rd at 6:00pm', icon: Icon }); ``` -------------------------------- ### Configure toast expansion and visible toast count Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md Shows how to make toasts expanded by default using the expand prop and how to limit the number of visible toasts using visibleToasts on the component. ```svelte ``` -------------------------------- ### Display a promise-based toast with loading, success, and error states Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md Shows how to use toast.promise() to automatically manage toast states based on a Promise's lifecycle. It transitions from a loading message to success or error upon resolution or rejection. ```javascript toast.promise(() => new Promise((resolve) => setTimeout(resolve, 2000)), { loading: 'Loading', success: 'Success', error: 'Error' }); ``` -------------------------------- ### Display a default toast message Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md Shows how to display a basic toast message using toast(). This is the simplest form of a toast. ```javascript toast('Event has been created'); ``` -------------------------------- ### Display a success toast message Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md Shows how to display a success-themed toast, which automatically includes a checkmark icon. Use toast.success() for positive feedback. ```javascript toast.success('Event has been created'); ``` -------------------------------- ### Apply specific styling to an individual toast Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md Demonstrates how to apply unique styling to a single toast by passing style, class, and descriptionClass properties directly to the toast() function call. These options override global settings. ```javascript toast('Event has been created', { style: 'background: red;', class: 'my-toast', descriptionClass: 'my-toast-description' }); ``` -------------------------------- ### Apply global styling to all toasts Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md Explains how to apply consistent styling to all toasts using the toastOptions prop on the component. This allows setting inline styles and CSS classes. ```svelte ``` -------------------------------- ### Display an info toast message Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md Shows how to display an info-themed toast, which automatically includes a question mark icon. Use toast.info() for informational messages. ```javascript toast.info('Event has new information'); ``` -------------------------------- ### Integrate Toaster component and trigger a basic toast in Svelte Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md Demonstrates how to add the component to your Svelte application and trigger a simple toast message using the toast() function from a button click. ```svelte ``` -------------------------------- ### Handling Toast Close Callbacks (JS) Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md Illustrates how to execute custom logic when a toast is dismissed (manually or by swipe) using the `onDismiss` callback or when it closes automatically after its duration using the `onAutoClose` callback, both provided in the options object of the `toast()` function. ```js toast('Event has been created', { onDismiss: (t) => console.log(`Toast with id ${t.id} has been dismissed`), onAutoClose: (t) => console.log(`Toast with id ${t.id} has been closed automatically`) }); ``` -------------------------------- ### Render a custom unstyled toast using toast.custom Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md Shows how to use toast.custom() to render a completely unstyled toast with a custom Svelte component. This provides maximum control over the toast's appearance. ```javascript import HeadlessToast from './HeadlessToast.svelte'; toast.custom(HeadlessToast); ``` -------------------------------- ### Display a warning toast message Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md Shows how to display a warning-themed toast, which automatically includes a warning icon. Use toast.warning() for cautionary messages. ```javascript toast.warning('Event has warning'); ``` -------------------------------- ### Display a toast with an action button Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md Demonstrates how to add an interactive action button to a toast. The action property takes an object with a label and an onClick handler. ```javascript toast('Event has been created', { action: { label: 'Undo', onClick: () => console.log('Undo') } }); ``` -------------------------------- ### Display a promise-based toast with dynamic success/error messages Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md Illustrates how to provide functions for success and error messages in toast.promise(). These functions receive the promise's resolved data or error, allowing for dynamic toast content. ```javascript toast.promise(promise, { loading: 'Loading...', success: (data) => { return `${data.name} has been added!`; }, error: 'Error' }); ``` -------------------------------- ### Customize Keyboard Focus Hotkey for Svelte Sonner Toasts Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md Override the default keyboard shortcut (⌥/alt + T) for focusing the toast area by providing an array of `event.code` values to the `hotkey` prop of the `` component. ```svelte ``` -------------------------------- ### Style Individual Toasts with Tailwind CSS via toast() Function Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md Style individual toasts programmatically by passing `unstyled: true` and a `classes` object to the `toast()` function call. This allows for dynamic styling based on the toast's context. ```js toast('Hello World', { unstyled: true, classes: { toast: 'bg-blue-400', title: 'text-red-400 text-2xl', description: 'text-red-400', actionButton: 'bg-zinc-400', cancelButton: 'bg-orange-400', closeButton: 'bg-lime-400' } }); ``` -------------------------------- ### Display a toast using a custom Svelte component Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md Explains how to render a custom Svelte component directly within a toast while retaining default styling. Pass the component itself as the first argument to toast(). ```javascript toast(CustomComponent); ``` -------------------------------- ### Set the display position of toasts Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md Demonstrates how to control where toasts appear on the screen using the position prop on the component. Various positions like 'top-center' are available. ```svelte ``` -------------------------------- ### Change the theme of the Toaster component Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md Explains how to set the visual theme of all toasts using the theme prop on the component. The default theme is 'light'. ```svelte ``` -------------------------------- ### Display an error toast message Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md Shows how to display an error-themed toast, which automatically includes an error icon. Use toast.error() for negative feedback or failures. ```javascript toast.error('Event has not been created'); ``` -------------------------------- ### Enable Rich Colors for Svelte Sonner Toasts Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md Make error and success state toasts more visually distinct and colorful by adding the `richColors` prop to the `` component. This enhances the user experience for important notifications. ```svelte ``` -------------------------------- ### Style Svelte Sonner Toasts with Tailwind CSS Classes Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md Apply Tailwind CSS classes directly to Svelte Sonner toasts by setting the `unstyled` prop to true and defining classes for the toast, title, description, and action/cancel/close buttons within `toastOptions.classes`. ```svelte ``` -------------------------------- ### Customize Loading Icon in Svelte Sonner using Snippets Source: https://github.com/wobsoriano/svelte-sonner/blob/main/CHANGELOG.md This Svelte code snippet demonstrates how to customize the default loading icon for toasts in Svelte Sonner v1 by utilizing Svelte 5's snippet feature. It shows how to wrap a custom `LoadingIcon` component within a `{#snippet loadingIcon()}` block inside the `` component. ```svelte {#snippet loadingIcon()} {/snippet} ``` -------------------------------- ### Update an existing toast message Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md Demonstrates how to update a previously displayed toast. Call toast() again with the id of the toast to be updated and the new content or options. ```javascript const toastId = toast('Sonner'); toast.success('Toast has been updated', { id: toastId }); ``` -------------------------------- ### Configure Toast Duration in Svelte Sonner Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md Set the display duration for all toasts globally via the `duration` prop on ``, or for individual toasts by passing `duration` to the `toast()` function. Use `Number.POSITIVE_INFINITY` for persistent toasts. ```svelte ``` ```js toast('Event has been created', { duration: 10000 }); // Persisent toast toast('Event has been created', { duration: Number.POSITIVE_INFINITY }); ``` -------------------------------- ### Customize Default Toast Icons in Svelte Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md Override the default icons for different toast types (loading, success, error, info, warning) by using Svelte's `{#snippet ...}` syntax within the `` component. This allows for custom SVG or component icons. ```svelte {#snippet loadingIcon()} {/snippet} {#snippet successIcon()} {/snippet} {#snippet errorIcon()} {/snippet} {#snippet infoIcon()} {/snippet} {#snippet warningIcon()} {/snippet} ``` -------------------------------- ### Handle Toast Dismissal and Auto-Close Callbacks in JavaScript Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md Attach `onDismiss` and `onAutoClose` callback functions to the `toast()` call. `onDismiss` fires when a toast is manually closed or swiped, while `onAutoClose` triggers when the toast disappears after its duration. ```js toast('Event has been created', { onDismiss: (t) => console.log(`Toast with id ${t.id} has been dismissed`), onAutoClose: (t) => console.log(`Toast with id ${t.id} has been closed automatically`) }); ``` -------------------------------- ### Set Custom Offset for Svelte Sonner Toasts Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md Adjust the positioning of toasts from the edges of the screen by providing a custom offset value to the `offset` prop of the `` component. This allows fine-tuning of toast placement. ```svelte ``` -------------------------------- ### Apply Tailwind CSS Styling Per Toast Type in Svelte Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md Customize the appearance of toasts based on their type (error, success, warning, info) using Tailwind CSS. Set `unstyled: true` and define specific classes for each toast type within `toastOptions.classes`. ```svelte ``` -------------------------------- ### Retrieve Visible Toasts using useSonner Hook in Svelte Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md Access and observe all currently visible toasts programmatically using the `useSonner` hook. The `$effect` reactive statement can be used to react to changes in the `sonner.toasts` array. ```ts const sonner = useSonner(); $effect(() => console.log(sonner.toasts)); ``` -------------------------------- ### Programmatically Dismiss Svelte Sonner Toasts Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md Dismiss individual toasts using `toast.dismiss(id)` where `id` is returned by the `toast()` function. Alternatively, dismiss all visible toasts by calling `toast.dismiss()` without any arguments. ```js const toastId = toast('Event has been created'); toast.dismiss(toastId); ``` ```js toast.dismiss(); ``` -------------------------------- ### Add a Close Button to Svelte Sonner Toasts Source: https://github.com/wobsoriano/svelte-sonner/blob/main/README.md Enable a close button for all toasts that appears on hover by simply adding the `closeButton` prop to the `` component. This provides users with an explicit way to dismiss toasts. ```svelte ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.