react-microtoast

A lightweight React toast library with progress bar, auto dark mode, and per-toast position control. Micro in size, mighty in features.

Why react-microtoast?

Other toast libraries make you choose — either you get a progress bar, or auto dark mode, or per-toast positions. With react-microtoast you get all three, with a 2-line setup and zero extra config.

| Feature | react-toastify | react-hot-toast | sonner | react-microtoast | |---|---|---|---|---| | Progress bar | ✅ | ❌ | ❌ | ✅ | | Auto dark mode | Manual | Manual | ✅ | ✅ | | Per-toast position | ❌ | ❌ | ❌ | ✅ | | Bundle size | ~50kb | Light | Light | Micro | | Setup | Medium | Easy | Easy | Easiest |

Features

• 4 toast types — success ✅, error ❌, warning ⚠️, info ℹ️
• Progress bar showing time remaining
• Stack multiple toasts without overlap
• Per-toast position control — each toast can appear in a different corner
• Auto dismiss with configurable duration
• Manual close button
• Auto light & dark mode — no setup needed
• Zero dependencies (only React as peer dep)
• Micro bundle size

Installation

npm install react-microtoast

Setup

Just 2 lines — wrap your app with ToastProvider and drop in ToastContainer:

import { ToastProvider, ToastContainer } from 'react-microtoast'

function App() {
  return (
    <ToastProvider position="top-right" duration={3500}>
      <ToastContainer />
      <YourApp />
    </ToastProvider>
  )
}

Usage

Use the useToast hook anywhere inside your app:

import { useToast } from 'react-microtoast'

function MyComponent() {
  const toast = useToast()

  return (
    <div>
      <button onClick={() => toast.success('Profile saved!')}>Save</button>
      <button onClick={() => toast.error('Something went wrong!')}>Delete</button>
      <button onClick={() => toast.warning('Please review before continuing.')}>Submit</button>
      <button onClick={() => toast.info('New update available.')}>Info</button>
    </div>
  )
}

Per-toast Options

Override position and duration individually per toast:

toast.success('Done!', { position: 'bottom-left' })
toast.error('Failed!', { duration: 8000 })
toast.info('Heads up!', { duration: 5000, position: 'top-left' })

ToastProvider Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | position | string | "top-right" | Default position for all toasts | | duration | number | 3500 | Auto dismiss time in milliseconds |

Position options: top-right top-left bottom-right bottom-left

Toast Methods

| Method | Description | |--------|-------------| | toast.success(message, options?) | Green success toast | | toast.error(message, options?) | Red error toast | | toast.warning(message, options?) | Amber warning toast | | toast.info(message, options?) | Blue info toast |

Dark Mode

Fully automatic — uses prefers-color-scheme under the hood. No class toggling, no extra props, no setup.

Project Structure

react-microtoast/
├── src/
│   ├── components/
│   │   ├── Toast.jsx
│   │   └── ToastContainer.jsx
│   ├── context/
│   │   └── ToastContext.jsx
│   ├── hooks/
│   │   └── useToast.js
│   ├── styles/
│   │   └── toast.css
│   └── index.js
├── package.json
└── README.md

License

MIT — free to use in any project.

Made for devs who just want toasts to work. Micro in size, mighty in features.