React Compact Toast

Toast notifications you can call from anywhere.

No provider to mount, no hook to declare. Import toast and call it.

gzipped: 7.0 kB
headless: 3.1 kB
dependencies: 0
React: 18 · 19

Toast Showcase

Experience different notification styles and interactions

Try it: hover a toast to pause its timer, press Alt + T to focus the newest one, then Esc to dismiss it.

Features

Screen reader and keyboard ready
Pauses on hover and focus
Promise and loading helpers
Multiple positioning options
Works with any CSS framework
Fully type-safe API

Bundle size (gzip)7.0 kB

Headless entry3.1 kB

Quick Start

📦Installation

npm install react-compact-toast

yarn add react-compact-toast

pnpm add react-compact-toast

🚀Basic Usage

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

export default function App() {
  return (
    <>
      <button onClick={() => toast.success('Saved')}>
        Save
      </button>
      <ToastContainer />
    </>
  );
}

⚙️Advanced Options

// Semantic variants
toast.success('Saved');
toast.error('Could not save');

// Follow a promise from start to finish
toast.promise(save(), {
  loading: 'Saving…',
  success: (draft) => `Saved as ${draft.title}`,
  error: (err) => `Could not save: ${err.message}`,
});

// Update a toast in place, or give it an action
const id = toast.loading('Uploading…');
toast.update(id, { type: 'success', text: 'Uploaded', autoClose: 3000 });

toast('Message archived', {
  action: { label: 'Undo', onClick: restore },
});

// 'topLeft' | 'topCenter' | 'topRight' |
// 'bottomLeft' | 'bottomCenter' | 'bottomRight'

🎯 Pro Tip: You can fully style your toasts using className — Tailwind, Emotion, Vanilla CSS, or plain CSS — it's all up to you!