What is a React toast notification and why it matters

A toast notification is a self-dismissing UI message used to inform users about transient events: „Saved”, „Upload failed”, or „New message received.” In single-page apps, toasts avoid modal interruptions and keep users in flow.
They should be quick to read, unobtrusive, and actionable (when required). Implementations vary from tiny homegrown solutions to full-featured libraries that handle stacking, animation, and persistence.

For React developers, toast notifications often integrate with app-wide state via Context or a global store so any component can call toast(„Message”). Libraries expose minimal APIs (like toast.success()) and include a ToastContainer that renders toasts outside the normal component tree.
The design goal is predictable placement, consistent timing, and accessibility (screen-reader support and ARIA roles).

Choosing between a library and a custom solution depends on your needs: speed-to-ship and feature richness favor libraries; tiny bundle size and precise behavior favor custom hooks. This guide covers both approaches and demonstrates a small toast system built with hooks and context.

Installation & getting started (libraries and CLI)

If you want a drop-in solution, the two most common packages are react-toastify and react-hot-toast. Install with npm or yarn:

// with npm
npm install react-toastify
// or
npm install react-hot-toast
  

After installing, import the container and call the toast API from any component. Example with react-toastify:

import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function App() {
  return (
    <div>
      <button onClick={() => toast.success('Saved successfully')}>Save</button>
      <ToastContainer position="top-right" autoClose={3000} />
    </div>
  );
}
  

For a quick tutorial on basic patterns and API differences, see this react-toast tutorial: react-toast tutorial.
If you prefer to control every detail, continue reading — the next section builds a minimal, framework-agnostic toast system using a provider and hook.

Build a lightweight custom toast system (Context + Hooks)

A custom system gives you total control over markup, styling, and behavior while keeping bundle size minimal. The core idea: centralize toast state in a provider, expose a useToast hook that enqueues toasts, and render them in a ToastContainer mounted once in your app.
This pattern fits React’s declarative model and plays well with server-rendered apps if you hydrate properly.

Below is a compact example implementing add/remove, types, auto-dismiss, and an optional pause-on-hover. Keep this as a reference to adapt for animations or persistent toasts.

// toast-context.js
import React, { createContext, useCallback, useContext, useState, useRef } from 'react';
const ToastContext = createContext();

export function ToastProvider({ children }) {
  const [toasts, setToasts] = useState([]);
  const idRef = useRef(0);

  const show = useCallback((message, opts = {}) => {
    const id = ++idRef.current;
    setToasts(t => [...t, { id, message, type: opts.type || 'info', timeout: opts.timeout ?? 3000 }]);
    return id;
  }, []);

  const remove = useCallback(id => {
    setToasts(t => t.filter(x => x.id !== id));
  }, []);

  return (
    <ToastContext.Provider value={{ show, remove, toasts }}>
      {children}
    </ToastContext.Provider>
  );
}

export function useToast() {
  const ctx = useContext(ToastContext);
  if (!ctx) throw new Error('useToast must be used within ToastProvider');
  return ctx;
}
  

Now create a simple ToastContainer that subscribes to toasts from the context and handles auto-dismiss:

// ToastContainer.js
import React, { useEffect } from 'react';
import { useToast } from './toast-context';

export default function ToastContainer() {
  const { toasts, remove } = useToast();
  useEffect(() => {
    toasts.forEach(t => {
      if (t.timeout > 0) {
        const timer = setTimeout(() => remove(t.id), t.timeout);
        return () => clearTimeout(timer);
      }
    });
  }, [toasts, remove]);

  return (
    <div aria-live="polite" aria-atomic="true" style={{ position:'fixed', top:12, right:12, zIndex:9999 }}>
      {toasts.map(t => (
        <div key={t.id} role="status" style={{margin:'8px 0',padding:'10px 14px',borderRadius:6,background:'#111827',color:'#fff'}}>
          {t.message}
        </div>
      ))}
    </div>
  );
}
  

Wrap your app with ToastProvider and mount ToastContainer once (typically in App.js). The useToast hook allows any component to show or remove toasts:

// App.js
import React from 'react';
import { ToastProvider } from './toast-context';
import ToastContainer from './ToastContainer';
import Example from './Example';

function App() {
  return (
    <ToastProvider>
      <Example />
      <ToastContainer />
    </ToastProvider>
  );
}
  

Customization, accessibility, and behavior

Visual customization covers color, iconography, location, and animation (fade, slide, scale). Keep visual language consistent with your app: success = green, error = red, info = blue. For animations, prefer CSS transforms with will-change or transform/opacity transitions to leverage compositor layers and avoid layout thrashing.

Accessibility is essential. Use aria-live=”polite” for non-interruptive notifications and aria-live=”assertive” for urgent alerts. Each toast should have role=”status” or role=”alert” depending on severity. Also implement keyboard focus management: toasts should not trap focus unless they require user interaction (e.g., Undo buttons).

Behavior options commonly offered by libraries: stacking order, max visible toasts, pause-on-hover, click-to-dismiss, and manual actions. When customizing durations, avoid very short autoClose times—1.5–4 seconds is a reasonable default depending on message length. For heavy apps, consider persisting critical errors or using a dedicated inbox for long-lived notifications.

When to use a library vs. custom implementation

Libraries like react-toastify or react-hot-toast provide reliability, animation, and edge-case handling out of the box: stacking logic, pausing timers on hover, accessibility defaults, and plugin ecosystems. If your timeline is short and you need a battle-tested API, libraries save development and QA time.

Conversely, custom implementations shine when bundle size, branding constraints, or unusual behaviors are priorities. A custom hook + provider is trivial to implement and keeps dependencies low, which matters in micro-frontends or highly optimized applications.

Either way, ensure you remain consistent across the app: same position, same durations, and clear message tone. If you opt for a library, you can still wrap it with your own useToast hook so your app code doesn’t depend directly on vendor APIs.

• Use a library for speed and completeness (react-toastify, react-hot-toast).
• Build custom for tiny bundles, custom UX, or complex accessibility flows.

Examples & quick reference

Quick react-toastify example for success/error notifications:

import { toast, ToastContainer } from 'react-toastify';

toast('Default message'); // simple
toast.success('Saved!');  // success style
toast.error('Failed to save', { autoClose: 5000 });

<ToastContainer position="bottom-left" newestOnTop />
  

react-hot-toast example:

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

toast('Hello', { duration: 3000 });
toast.success('Uploaded', { icon: '✅' });

<Toaster position="top-right" />
  

For extended guidance and a tutorial-style walkthrough, check this community article that walks through building a React toast: react-toast tutorial.
For production libraries, see react-toastify (library) and React documentation for context on rendering strategies.

SEO, voice search optimization, and micro-markup

When optimizing for featured snippets and voice queries, include short, direct answers near the top (e.g., „To show a toast in React: import the library, mount the container, call toast(‘msg’)”). Use question headings that reflect user intent such as „How do I add toast notifications in React?” and provide a one-line answer followed by details.

Use JSON-LD FAQ and Article markup so search engines can surface your content directly. Below this article you’ll find a ready-to-use JSON-LD block covering the most common questions and a basic Article schema covering the page metadata.

Ensure messages are concise for voice assistants. Long descriptive strings break natural reading. Make sure your toasts are readable out of context if they might be read aloud.