# @martynaskadisa/sonner

> A bit less opinionated toast component for React.

Latest version **0.3.1** (published 2023-04-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install @martynaskadisa/sonner
pnpm add @martynaskadisa/sonner
yarn add @martynaskadisa/sonner
bun add @martynaskadisa/sonner
```

## Health

**Score 50/100 (C)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score; popular repo.

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.3.1 |
| Published | 2023-04-12 |
| First published | 2023-04-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 93.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 12946 |
| Author | Emil Kowalski |
| Maintainers | martynaskadisa |
| Keywords | react, notifications, toast, snackbar, message |

## Links

- npm: https://www.npmjs.com/package/@martynaskadisa/sonner
- Repository: https://github.com/emilkowalski/sonner
- Homepage: https://sonner.emilkowal.ski/
- Issues: https://github.com/emilkowalski/sonner/issues
- npm.io page: https://npm.io/package/@martynaskadisa/sonner

## Alternatives

- [update-check](https://npm.io/package/update-check.md) — 4.0M weekly downloads
- [react-native-onesignal](https://npm.io/package/react-native-onesignal.md) — 134.5K weekly downloads
- [react-redux-toastr](https://npm.io/package/react-redux-toastr.md) — 33.7K weekly downloads
- [@nocobase/plugin-notification-manager](https://npm.io/package/@nocobase/plugin-notification-manager.md) — 2.0K weekly downloads
- [react-simple-toasts](https://npm.io/package/react-simple-toasts.md) — 1.9K weekly downloads

## Recent versions

- 0.3.1 (latest) — 2023-04-12
- 0.3.0 — 2023-04-12

## README

https://user-images.githubusercontent.com/36730035/220868994-f0c92862-7e7d-487c-ab3a-540e7b48ab4a.mp4

> This fork only changes so styles.css don't get imported into the bundle

# Introduction

[Sonner](https://sonner.emilkowal.ski/) is an opinionated toast component for React. It's customizable, but styled by default. Comes with a swipe to dismiss animation.

## Usage

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

```bash
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.

```jsx
import { Toaster, toast } from 'sonner';

// ...

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

## Types

### Default

Most basic toast. You can customize it (and any other type) by passing an options object as the second argument.

```jsx
toast('Event has been created');
```

With custom icon and description:

```jsx
toast('Event has been created', {
  description: 'Monday, January 3rd at 6:00pm',
  icon: <MyIcon />,
});
```

### Success

Renders a checkmark icon in front of the message.

```jsx
toast.success('Event has been created');
```

### Error

Renders an error icon in front of the message.

```jsx
toast.error('Event has not been created');
```

### Action

Renders a button.

```jsx
toast('Event has been created', {
  action: {
    label: 'Undo',
    onClick: () => console.log('Undo'),
  },
});
```

### Promise

Starts in a loading state and will update automatically after the promise resolves or fails.

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

You can pass a function to the success/error messages to incorporate the result/error of the promise.

```jsx
toast.promise(promise, {
  loading: 'Loading...',
  success: (data) => {
    return `${data.name} has been added!`;
  },
  error: 'Error',
});
```

### Custom JSX

You can pass jsx as the first argument instead of a string to render custom jsx while maintaining default styling. You can use the headless version below for a custom, unstyled toast.

```jsx
toast(<div>A custom toast with default styling</div>);
```

## Customization

### Headless

You can use `toast.custom` to render an unstyled toast with custom jsx while maintaining the functionality.

```jsx
toast.custom((t) => (
  <div>
    This is a custom component <button onClick={() => toast.dismiss(t)}>close</button>
  </div>
));
```

### Theme

You can change the theme using the `theme` prop. Default theme is light.

```jsx
<Toaster theme="dark" />
```

### Position

You can change the position through the `position` prop on the `<Toaster />` component. Default is `bottom-right`.

```jsx
// Available positions
// top-left, top-center, top-right, bottom-left, bottom-center, bottom-right

<Toaster position="top-center" />
```

### Expanded

Toasts can also be expanded by default through the `expand` prop. You can also change the amount of visible toasts which is 3 by default.

```jsx
<Toaster expand visibleToasts={9} />
```

### Styling for all toasts

You can style your toasts globally with the `toastOptions` prop in the `Toaster` component.

```jsx
<Toaster
  toastOptions={{ style: { background: 'red' }, className: 'my-toast', descriptionClassName: 'my-toast-description' }}
/>
```

### Styling for individual toast

```jsx
toast('Event has been created', {
  style: {
    background: 'red',
  },
  className: 'my-toast',
  descriptionClassName: 'my-toast-description',
});
```

### Close button

Add a close button to all toasts that shows on hover by adding the `closeButton` prop.

```jsx
<Toaster closeButton />
```

### Rich colors

You can make error and success state more colorful by adding the `richColors` prop.

```jsx
<Toaster richColors />
```

### Custom offset

Offset from the edges of the screen.

```jsx
<Toaster offset="80px" />
```

### Programmatically remove toast

To remove a toast programmatically use `toast.dismiss(id)`.

```jsx
const toastId = toast('Event has been created');

toast.dismiss(toastId);
```

You can also use the dismiss method without the id to dismiss all toasts.

```jsx
// Removes all toasts

toast.dismiss();
```

### Programmatically remove toast

You can change the duration of each toast by using the `duration` property, or change the duration of all toasts like this:

```jsx
<Toaster duration={10000} />
```

```jsx
toast('Event has been created', {
  duration: 10000,
});

// Persisent toast
toast('Event has been created', {
  duration: Infinity,
});
```

## Keyboard focus

You can focus on the toast area by pressing ⌥/alt + T. You can override it by providing an array of event.code values for each key.

```jsx
<Toaster hotkey={['KeyC']} />
```

---
_Source: https://npm.io/package/@martynaskadisa/sonner · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._