Svelte Sonner

An opinionated toast component for Svelte.

NotificationSvelte
wobsoriano/svelte-sonnersvelte-sonner.vercel.appsvelte-sonner

README

svelte-sonner


An opinionated toast component for Svelte.

Based on emilkowalski's React implementation.

Quick start


Install it:

  1. ```bash
  2. npm i svelte-sonner
  3. # or
  4. yarn add svelte-sonner
  5. # or
  6. pnpm add svelte-sonner
  7. ```

Add `` to your app, it will be the place where all your toasts will be rendered. After that, you can use `toast()` from anywhere in your app.

  1. ```svelte
  2. <script>
  3. import { Toaster, toast } from 'svelte-sonner'
  4. </script>

  6. <Toaster />
  7. <button on:click={() => toast('My first toast')}>Give me a toast</button>
  8. ```

Types


Default


Most basic toast. You can customize it (and any other type) by passing an options object as the second argument.

  1. ```js
  2. toast('Event has been created')
  3. ```

With custom icon and description:

  1. ```js
  2. import Icon from './Icon.svelte'

  4. toast('Event has been created', {
  5.   description: 'Monday, January 3rd at 6:00pm',
  6.   icon: Icon,
  7. })
  8. ```

Success


Renders a checkmark icon in front of the message.

  1. ```js
  2. toast.success('Event has been created')
  3. ```

Error


Renders an error icon in front of the message.

  1. ```js
  2. toast.error('Event has not been created')
  3. ```

Action


Renders a button.

  1. ```js
  2. toast('Event has been created', {
  3.   action: {
  4.     label: 'Undo',
  5.     onClick: () => console.log('Undo'),
  6.   },
  7. })
  8. ```

Promise


Starts in a loading state and will update automatically after the promise resolves or fails.

  1. ```js
  2. toast.promise(() => new Promise(resolve => setTimeout(resolve, 2000)), {
  3.   loading: 'Loading',
  4.   success: 'Success',
  5.   error: 'Error',
  6. })
  7. ```

You can pass a function to the success/error messages to incorporate the result/error of the promise.

  1. ```js
  2. toast.promise(promise, {
  3.   loading: 'Loading...',
  4.   success: (data) => {
  5.     return `${data.name} has been added!`
  6.   },
  7.   error: 'Error',
  8. })
  9. ```

Custom Component


You can pass a component as the first argument instead of a string to render custom component while maintaining default styling. You can use the headless version below for a custom, unstyled toast.

  1. ```js
  2. toast(CustomComponent)
  3. ```

Updating a toast


You can update a toast by using the toast function and passing it the id of the toast you want to update, the rest stays the same.

  1. ```js
  2. const toastId = toast('Sonner')

  4. toast.success('Toast has been updated', {
  5.   id: toastId,
  6. })
  7. ```

Customization


Headless


You can use toast.custom to render an unstyled toast with custom component while maintaining the functionality.

  1. ```svelte
  2. <script>
  3. import { createEventDispatcher } from 'svelte';

  5. const dispatch = createEventDispatcher()
  6. </script>

  8. <div>
  9.   This is a custom component <button on:click={() => dispatch('removeToast')}>close</button>
  10. </div>
  11. ```

  1. ```js
  2. import HeadlessToast from './HeadlessToast.svelte'

  4. toast.custom(HeadlessToast)
  5. ```

Theme


You can change the theme using the theme prop. Default theme is light.

  1. ```svelte
  2. <Toaster theme="dark" />
  3. ```

Position


You can change the position through the `position` prop on the `` component. Default is `bottom-right`.

  1. ```svelte

  5. <Toaster position="top-center" />
  6. ```

Expanded


Toasts can also be expanded by default through the expand prop. You can also change the amount of visible toasts which is 3 by default.

  1. ```svelte
  2. <Toaster expand visibleToasts={9} />
  3. ```

Styling for all toasts


You can style your toasts globally with the toastOptions prop in the Toaster component.

  1. ```svelte
  2. <Toaster
  3.   toastOptions={{ style: 'background: red;', class: 'my-toast', descriptionClass: 'my-toast-description' }}
  4. />
  5. ```

Styling for individual toast


  1. ```js
  2. toast('Event has been created', {
  3.   style: 'background: red;',
  4.   class: 'my-toast',
  5.   descriptionClass: 'my-toast-description',
  6. })
  7. ```

Close button


Add a close button to all toasts that shows on hover by adding the closeButton prop.

  1. ```svelte
  2. <Toaster closeButton />
  3. ```

Rich colors


You can make error and success state more colorful by adding the richColors prop.

  1. ```svelte
  2. <Toaster richColors />
  3. ```

Custom offset


Offset from the edges of the screen.

  1. ```svelte
  2. <Toaster offset="80px" />
  3. ```

Programmatically remove toast


To remove a toast programmatically use toast.dismiss(id).

  1. ```js
  2. const toastId = toast('Event has been created')

  4. toast.dismiss(toastId)
  5. ```

To remove a toast from inside a custom component, dispatch closeToast:

  1. ```js
  2. import { createEventDispatcher } from 'svelte'

  4. const dispatch = createEventDispatcher()

  6. dispatch('removeToast')
  7. ```

You can also use the dismiss method without the id to dismiss all toasts.

  1. ```js
  2. // Removes all toasts

  4. toast.dismiss()
  5. ```

Duration


You can change the duration of each toast by using the duration property, or change the duration of all toasts like this:

  1. ```svelte
  2. <Toaster duration={10000} />
  3. ```

  1. ```js
  2. toast('Event has been created', {
  3.   duration: 10000,
  4. })

  6. // Persisent toast
  7. toast('Event has been created', {
  8.   duration: Number.POSITIVE_INFINITY,
  9. })
  10. ```

On Close Callback


You can pass onDismiss and onAutoClose callbacks. onDismiss gets fired when either the close button gets clicked or the toast is swiped. onAutoClose fires when the toast disappears automatically after it's timeout (duration prop).

  1. ```js
  2. toast('Event has been created', {
  3.   onDismiss: t => console.log(`Toast with id ${t.id} has been dismissed`),
  4.   onAutoClose: t => console.log(`Toast with id ${t.id} has been closed automatically`),
  5. })
  6. ```

Keyboard focus


You can focus on the toast area by pressing ⌥/alt + T. You can override it by providing an array of event.code values for each key.

  1. ```svelte
  2. <Toaster hotkey={['KeyC']} />
  3. ```

License


MIT