Quick answer (featured-snippet friendly)

If you want lightweight toast notifications in React, install react-hot-toast (npm i react-hot-toast), render <Toaster /> once near your app root, then call toast('hello') from components. Use toast.promise() for promise states and toast.custom() or global options on <Toaster /> to style and position toasts.

This guide covers installation, example code, promise-based toasts, hooks, customization strategies, and performance tips so you can ship a robust React notification system quickly.

Prefer a hands-on tutorial? See this compact react-hot-toast tutorial for a complete example and deeper explanation: react-hot-toast tutorial.

Installation & setup

Start by installing the library. Use your package manager of choice. This is the shortest critical path to a working notification system.

// npm
npm install react-hot-toast

// yarn
yarn add react-hot-toast

Next, mount the Toaster once—usually in your top-level component (App or Root). It manages the toast stack, positioning, and container lifecycle. Keep it global so any component can push toasts without prop drilling.

Basic setup example:

import { Toaster } from 'react-hot-toast'

function App() {
  return (
    <>
      
      {/* rest of your app */}
    
  )
}

For a step-by-step demo and practical patterns, consult a practical react-hot-toast getting started writeup: react-hot-toast getting started.

Core concepts and API

At its heart react-hot-toast exposes a small API: toast(), toast.success(), toast.error(), toast.promise(), toast.custom(), and a <Toaster/> component. The design favors ergonomics and minimal bundle impact.

Call toast('msg') from event handlers or effects. Each call returns an id you can later use to update or dismiss the toast. This id-based system is ideal when you need to update a pending notification.

Examples:

import toast from 'react-hot-toast'

toast('Saved')
toast.success('Uploaded')
const id = toast.loading('Processing...')
toast.success('Done', { id })

Use these primitives together to build reliable notification flows that reflect application state and asynchronous operations.

Promise-based toasts and hooks

One of react-hot-toast’s most useful features is toast.promise(). Wrap a promise and provide three messages: loading, success, and error. This reduces boilerplate for common UX patterns (e.g., network requests).

Example with fetch:

toast.promise(
  fetchData(),
  {
    loading: 'Loading...',
    success: 'Loaded',
    error: 'Could not load'
  }
)

You can also use custom React hooks to encapsulate notification logic for common actions. For instance, create a useUpload hook that triggers toasts on start, progress, success, and error—this keeps components clean and testable.

Customization, styling and accessibility

Customize global defaults via props on <Toaster /> (position, duration, gutter). For per-toast customization, the API accepts options like duration, style, and className.

If you need a completely custom layout, use toast.custom() and return any React node. Ensure accessible announce behavior: include proper aria attributes and don’t rely solely on color to convey meaning.

Here’s a simple custom toast:

toast.custom((t) => (
  <div style={{
    padding: '12px',
    borderRadius: 8,
    background: '#111',
    color: '#fff'
  }}>
    {t.visible ? 'Visible' : 'Hidden'}
  </div>
))

Best practices & performance

Keep toasts brief and actionable. Use success to confirm, error to guide remediation, and loading for operations that take noticeable time. Avoid stacking too many toasts—use a sensible limit and dismiss old ones programmatically.

Performance: react-hot-toast is lightweight, but like any UI updates, excessive updates can cause layout churn. Reuse toast ids to update in place instead of creating new toasts frequently. Lazy-load heavy UI used in custom toasts if warranted.

Accessibility: ensure screen readers announce critical toasts. You can add role=”status” or use visually hidden text when providing non-textual indicators. Test with VoiceOver and NVDA for predictable behavior.

• Keep messages concise (3–8 words) and actionable.
• Use toast ids to update/dismiss instead of piling up new toasts.

Example: building a simple flow

This example demonstrates a typical flow: trigger a request, show a loading toast, update on success or error. It uses toast.loading() and updates with the returned id.

async function handleSave(data) {
  const id = toast.loading('Saving...')
  try {
    await api.save(data)
    toast.success('Saved', { id })
  } catch (err) {
    toast.error('Failed to save', { id })
  }
}

This pattern reduces flicker because the same toast is updated rather than replaced. For parallel operations use unique ids or include context in the message to keep user feedback clear.

For a full tutorial, example patterns, and wiring the Toaster into app state, refer to a compact hands-on guide: react-hot-toast example and tutorial.

FAQ

How do I install react-hot-toast?

Install with npm install react-hot-toast or yarn add react-hot-toast. Render <Toaster /> once at the app root, then call toast('message') from any component.

How do I show a toast for a promise with react-hot-toast?

Wrap the promise with toast.promise(promise, { loading, success, error }). React-hot-toast will manage the loading state and replace the message when the promise resolves or rejects.

How can I customize styles and positions in react-hot-toast?

Pass global options to <Toaster position="top-right" toastOptions={{ duration: 4000 }} />, use per-toast options like toast('msg', { duration: 5000, style: { background: 'black' } }), or use toast.custom() to render custom React nodes.

Semantic core (expanded)

Grouped keywords and LSI phrases for on-page optimization and content planning.

Use these clusters to vary headers, alt text, link anchors, and microcopy. Anchor text examples used in this article: react-hot-toast tutorial, react-hot-toast getting started, and react-hot-toast example.