How to use Sonner by @emilkowalski

The React ecosystem has no shortage of toast notification packages, but the Sonner npm package aims to stand out with its ease of use and intuitive API. Created by Emil Kowalski, the Sonner npm package was recently released as an opinionated toast component built specifically for React applications.

With a simple installation and minimal configuration, The Sonner npm package allows developers to start displaying toasts with little effort.

Installation

To install Sonner, run one of the following commands based on your package manager:

pnpm i sonner
npm i sonner
yarn add sonner
bun add sonner

Usage

First off, you need to render the at the root of your project:

import { Toaster } from 'sonner'


function App() {
  return (
    <div>
      <Toaster />
    </div>
  )
}

You will now be able to show a toast by using the toast function exported from the Sonner package:

import { toast } from 'sonner'


function MyComponent() {
  return (
    <button onClick={() => toast('My first toast')}>
        Give me a toast
     </button>
  )
}

Colors

If you find the toasts to be a bit boring, you can add some color by using the richColors attribute on the component.

import { Toaster } from 'sonner'


function App() {
  return (
    <div>
      <Toaster richColors />
    </div>
  )
}

Types

Sonner provides a variety of different types, such as success and error, that can be accessed through the toast function:

// Default
toast('My first toast')


// With description
toast.message('My toast with description', {
  description: 'This is my toast description,
})


// Success
toast.success('My successful toast')


// Error
toast.error('My error toast')


// With an action
toast('My action toast', {
  action: {
    label: 'Click me!',
    onClick: () => console.log('Button was clicked!')
  },
})


// With promise
const promise = () => new Promise((resolve) => setTimeout(resolve, 2000));

toast.promise(promise, {
  loading: 'Loading...',
  success: (data) => {
    return `${data.name} toast has been added`;
  },
  error: 'Error',
});


// Custom 
toast(<div>A custom toast with default styling</div>)

Position

Sonner allows you to set the position of the toasts with the position attribute on the component:

import { Toaster } from 'sonner'


function App() {
  return (
    <div>
      <Toaster position="top-left"/>
    </div>
  )
}

The following positions are available:

Visible toasts

You can change the number of toasts visible through the visibleToasts attribute:

import { Toaster } from 'sonner'


function App() {
  return (
    <div>
      <Toaster visibleToasts={5} />
    </div>
  )
}

It is also possible to set whether all toasts should be visible at once or if they should stack on top of each other, by using the expand attribute:

import { Toaster } from 'sonner'


function App() {
  return (
    <div>
      <Toaster expand={true} />
    </div>
  )
}

Close Button

It is possible to add a closing button to all toasts, by adding the closeButton attribute to the component:

import { Toaster } from 'sonner'


function App() {
  return (
    <div>
      <Toaster closeButton />
    </div>
  )
}