# React Hot Toast — Lightweight Notification Toasts for React

> A small, customizable toast notification library for React that provides promise-based toasts, accessible announcements, and smooth enter/exit animations with zero dependencies beyond React.

## Install

Save in your project root:

# React Hot Toast — Lightweight Notification Toasts for React

## Quick Use
```bash
npm install react-hot-toast
```
```jsx
import toast, { Toaster } from 'react-hot-toast';

function App() {
  return (
    <div>
      <button onClick={() => toast.success('Saved!')}>Save</button>
      <Toaster />
    </div>
  );
}
```

## Introduction
React Hot Toast provides a minimal API for showing toast notifications in React applications. It focuses on developer experience with a single function call to trigger notifications and built-in support for promises, loading states, and custom rendering.

## What React Hot Toast Does
- Renders toast notifications with enter/exit animations using CSS transforms
- Supports success, error, loading, and custom toast types via a single function API
- Handles promise-based toasts that automatically switch between loading, success, and error states
- Manages toast stacking, auto-dismiss timers, and pause-on-hover behavior
- Provides accessible ARIA live region announcements for screen readers

## Architecture Overview
The library uses a headless notification store that manages toast state independently from the render layer. The Toaster component subscribes to this store and renders positioned toast containers. Each toast is a lightweight object with type, message, and configuration. Animations are handled via CSS transitions rather than JavaScript animation libraries to keep the bundle small.

## Self-Hosting & Configuration
- Install via npm and add the Toaster component once at your app root
- Configure default position with the position prop (top-center, bottom-right, etc.)
- Set global defaults for duration, styling, and icon overrides via Toaster props
- Use toast.custom for fully controlled rendering with your own components
- Adjust the gutter and containerStyle props to match your layout spacing

## Key Features
- Under 5 KB gzipped with zero external dependencies
- Promise API that tracks async operations and updates toast state automatically
- Headless mode for using the notification store without the built-in renderer
- Pause-on-hover and swipe-to-dismiss for desktop and mobile interactions
- TypeScript support with full type definitions included

## Comparison with Similar Tools
- **React Toastify** — feature-rich with more built-in themes; React Hot Toast is smaller and more minimal
- **Notistack** — designed for Material UI integration; React Hot Toast is framework-agnostic
- **Sonner** — similar minimal approach with a different animation style and API design
- **SweetAlert2** — full modal dialogs; React Hot Toast is focused on non-blocking toasts

## FAQ
**Q: Can I show toasts from outside React components?**
A: Yes. The toast function works anywhere in your JavaScript code as long as Toaster is mounted.

**Q: How do I customize the appearance of toasts?**
A: Pass a style or className prop to individual toast calls or set global defaults on the Toaster component.

**Q: Does it support stacking multiple toasts?**
A: Yes. Toasts stack vertically and shift position as new ones appear or old ones dismiss.

**Q: Can I use it with Next.js Server Components?**
A: The Toaster component and toast calls must run on the client. Mark them with "use client" in App Router projects.

## Sources
- https://github.com/timolins/react-hot-toast
- https://react-hot-toast.com/

---
Source: https://tokrepo.com/en/workflows/asset-339ec01d
Author: AI Open Source