Opinionated Toast Component For React – Sonner

An opinionated toast component for React. It’s customizable but styled by default. Comes with a swipe to dismiss animation.

How to use it:

1. Install and import the Sonner component.

# Yarn
$ yarn add sonner

# NPM
$ npm i sonner

import { Toaster, toast } from 'sonner'

2. Create toasts as follows:

// default toast
toast('Event has been created')
// with description
toast.message('Event has been created', {
  description: 'Monday, January 3rd at 6:00pm',
})

// success toast
toast.success('Event has been created')
// with actions
toast('Event has been created', {
  action: {
    label: 'Undo',
    onClick: () => console.log('Undo')
  },
})

// promise toast
const promise = () => new Promise((resolve) => setTimeout(resolve, 2000));
toast.promise(promise, {
  loading: 'Loading',
  success: 'Success',
  error: 'Error',
});

// custom toast
toast.custom(() => <div>This is a custom component</div>)

Download Details:

Author: emilkowalski

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/emilkowalski/sonner

License: MIT