Opinionated Toast Component For React - Sonner

Description:

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>)