sonner

https://github.com/vallezw/sonner/assets/50796600/59b95cb7-9068-4f3e-8469-0b35d9de5cf0

Sonner is an opinionated toast component for React. You can read more about why and how it was built here.

Usage

To start using the library, install it in your project:

npm install sonner

Add <Toaster /> 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.

import { Toaster, toast } from 'sonner';

// ...

function App() {
  return (
    <div>
      <Toaster />
      <button onClick={() => toast('My first toast')}>Give me a toast</button>
    </div>
  );
}

Documentation

Find the full API reference in the documentation.

Similar packages

Other packages similar to sonner

react-toastify

React-Toastify is a popular library for adding toast notifications to React applications. It offers a wide range of customization options and supports various animations. Compared to Sonner, React-Toastify has a larger community and more extensive documentation, making it a robust choice for developers seeking comprehensive features.

notistack

Notistack is a notification library for React that allows stacking of notifications. It provides a flexible API and supports customization and theming. Notistack is similar to Sonner in terms of lightweight design but offers additional features like stacking, which can be beneficial for applications requiring multiple simultaneous notifications.

react-hot-toast

React Hot Toast is a lightweight and customizable toast notification library for React. It focuses on simplicity and performance, similar to Sonner. While both libraries offer basic and customizable toasts, React Hot Toast emphasizes minimalism and ease of use, making it suitable for developers who prefer a straightforward approach.