# react-next-toast

> A premium, modern toast notification system for React applications

Latest version **3.0.1** (published 2025-12-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-next-toast
pnpm add react-next-toast
yarn add react-next-toast
bun add react-next-toast
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 3.0.1 |
| Published | 2025-12-28 |
| First published | 2023-07-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 2.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Imam Dahir Dan-Azumi |
| Maintainers | eimaam.dev |
| Keywords | react, toast, notification, alert, snackbar, nextjs, typescript, premium, modern, linear, vercel |

## Links

- npm: https://www.npmjs.com/package/react-next-toast
- Repository: https://github.com/eimaam/react-next-toast
- Issues: https://github.com/eimaam/react-next-toast/issues
- npm.io page: https://npm.io/package/react-next-toast

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

- 3.0.1 (latest) — 2025-12-28
- 3.0.0 — 2025-12-28
- 2.0.2 — 2024-03-18
- 2.0.1 — 2024-01-31
- 2.0.0 — 2024-01-27
- 1.2.1 — 2023-07-27
- 1.1.1 — 2023-07-24
- 1.1.0 — 2023-07-24

## README

# react-next-toast v3.0 🍞

A premium, modern notification system for React applications. Inspired by the refined design language of **Linear**, **Vercel**, and **Raycast**.

[![npm version](https://img.shields.io/npm/v/react-next-toast.svg?style=flat-square)](https://www.npmjs.com/package/react-next-toast)
[![license](https://img.shields.io/npm/l/react-next-toast.svg?style=flat-square)](https://github.com/eimaam/react-next-toast/blob/main/LICENSE)

## ✨ Features

- **Premium Aesthetics**: Glassmorphism surfaces with subtle blur, translucent borders, and refined animations.
- **Intelligent Stacking**: Notifications stack elegantly with customizable gaps and responsive positioning.
- **Semantic Variants**: Beautifully crafted Success, Error, Warning, Info, and Loading states with matching icons.
- **Imperative & Declarative**: Use the standalone `toast` API or the `useToast` hook.
- **Promise Support**: Handle async states with ease using `toast.promise`.
- **Lightweight & Fully Typed**: Zero external styling dependencies, built with TypeScript.

## 🚀 Getting Started

### Installation

```bash
npm install react-next-toast
```

### Setup

Add the `ToastProvider` to your app root to enable context-based features and global configuration react requires...

```jsx
import { ToastProvider } from 'react-next-toast';

function App() {
  return (
    <ToastProvider position="bottom-right" theme="dark">
      <Component {...pageProps} />
    </ToastProvider>
  );
}
```

## 📖 Usage

### Simple Usage

```javascript
import { toast } from 'react-next-toast';

// Simple toast
toast("Hello world!");

// Variant toasts
toast.success("Yo! Saved successfully");
toast.error("Something went wrong");
toast.warning("Check your settings...");
toast.info("New update just dropped!!");
toast.loading("Loading..."); [NEW]
```

### Advanced Usage

```javascript
toast.success("Saved successfully", {
  description: "Your changes have been applied to all workspaces.",
  duration: 4000,
  action: {
    label: "Undo",
    onClick: () => console.log("Undo clicked"),
  },
});
```

### Async Promises

```javascript
const myPromise = fetchData();

toast.promise(myPromise, {
  loading: 'Fetching data...',
  success: (data) => `Loaded ${data.name}!`,
  error: 'Could not fetch data.',
});
```

### Standalone API

No context? No problem. The `toast` API works anywhere in your application, even outside of React components.

```javascript
import { toast } from 'react-next-toast';

// this automatically injects a container if not found
toast.success("Build complete!");
```

## 🎨 Global Configuration

Configure the default behavior via the `ToastProvider` or `toast.configure`.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `position` | `ToastPosition` | `bottom-right` | Position on desktop. Mobile defaults to `top-center`. |
| `theme` | `'light' \| 'dark'` | `dark` | Visual theme of the toasts. |
| `maxVisible` | `number` | `5` | Maximum number of toasts visible at once. |
| `gap` | `number` | `12` | Spacing between stacked toasts in pixels. |

## 🛠 Backwards Compatibility:

v3.0 preserves the legacy `showToast` API for a zero-effort upgrade path. Existing calls will automatically use the new premium design.

```javascript
import { showToast } from 'react-next-toast';

showToast.success('Log in successful');
```

### Contribution
Project is Open-Sourced! Wanna contribute? Feel free to fork the repo and send a PR. I will be sure to merge if its a good piece. Thank you!

Thank you for using `react-next-toast`! 🙏❤️ If you experience any issue, have any questions or sugestions for improvement, feel free to raise an issue here on GitHub or reach out to me. Your feedback is very vital! ☺:)

Cheers to toasting to simpler and delightful notes! 🥂


## 📄 License

MIT © [Imam Dahir Dan-Azumi](https://eimaam.dev)

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