Sonner.js

Installation

npm install @numer/sonner

Usage

import toast from '@numer/sonner'

// ...

toast('My first toast')

Current config

Change options on this page to see currently used config.

toast.config({})

Types

You can customize the type of toast you want to render, and pass an options object as the second argument.

toast('Event has been created')

Theme

You can smoothly switch between light mode and dark mode.

toast.config({ theme: 'light' })

Position

Swipe direction changes depending on the position.

toast('Event has been created', { position: "top-left" })

Expand

Define whether the toast stack should be always expanded or collapsed.

toast.config({ expand: true })

Visible toasts

You can change the amount of toasts visible through the visibleToasts prop.

toast.config({ visibleToasts: 1 })

Duration

// Global
toast.config({
  toastOptions: {
    duration: 1000,
  }
})

// One-off change
toast("This toast will be visible for 1s", {
  duration: 1000,
})

Other

toast.success('Event has been created', { richColors: true })