sonner README

The project's README from github.com/emilkowalski/sonner. As one markdown file: README.md.

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

Alternatively you can use the /ask-sonner skill to do it for you and help you with any other Sonner-related questions.

npx skills add https://github.com/emilkowalski/skills --skill ask-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.

sonner (emilkowalski/sonner)

Searching Database…

13.1K ·GitHub
Sonner
What is this?Sonner is an opinionated toast component for React that lets you show notification messages from anywhere in your app.
Is it a full notification system or just a component?It is a single React component library you render once (a Toaster) and then trigger toasts from anywhere via a function call.
How do I add it to a project?Install the library into your project, render the Toaster component in your app, then call toast() from anywhere to show a message.
Do I need anything else besides React to use it?No extra backend or service is needed; there is also an /ask-sonner skill that can help install it and answer Sonner-related questions.
Where can I find all the configuration options?The full API reference is available in the project documentation.
Is there styling included out of the box?Yes, a styles.css file is bundled with the library build, so toasts come styled without extra setup.
Can I use it to show success, error, or custom toasts?As a toast component library the typical pattern is calling toast() with different variants, though the README itself only shows the basic usage and points to the docs for the full API.
What are similar projects?react-toastify, rare-ui, chakra-ui, sweetalert2, ant-design-mobile, react-transition-group, react-bits, astryx
Which topics is it in?toast, reactjs, notifications, component-library, nextjs, ui-components, css, react, npm, frontend, library, typescript
Creator
emilkowalski
Size
1.4 MB
Stars
13.1K
Updated
CommitAug 10Releasev2.0.8Aug 09
Age
3y
Commits · 90 Days