Skip to main content

latest
It is unknown whether this package works with Cloudflare Workers, Node.js, Deno, Bun, Browsers
It is unknown whether this package works with Cloudflare Workers
It is unknown whether this package works with Node.js
It is unknown whether this package works with Deno
It is unknown whether this package works with Bun
It is unknown whether this package works with Browsers
JSR Score
52%
Published
11 months ago (0.0.3)

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.

Add Package

deno add jsr:@bureaudouble/sonner

Import symbol

import * as sonner from "@bureaudouble/sonner";

---- OR ----

Import directly with a jsr specifier

import * as sonner from "jsr:@bureaudouble/sonner";

Add Package

npx jsr add @bureaudouble/sonner

Import symbol

import * as sonner from "@bureaudouble/sonner";

Add Package

yarn dlx jsr add @bureaudouble/sonner

Import symbol

import * as sonner from "@bureaudouble/sonner";

Add Package

pnpm dlx jsr add @bureaudouble/sonner

Import symbol

import * as sonner from "@bureaudouble/sonner";

Add Package

bunx jsr add @bureaudouble/sonner

Import symbol

import * as sonner from "@bureaudouble/sonner";