React toast notifications
Accessible React toast notifications.
A lightweight, extensible toast component for React with a simple API, flexible placement, and accessible status updates.
Built for React interfaces
Toast notifications that stay out of the way.
- 01
Accessible by default
Polite live updates, status semantics, and a labelled close button help notifications work with assistive technology.
- 02
A small React API
Wrap your app with ToastProvider, call useToast where you need it, and keep notification state out of your screens.
- 03
Flexible behavior
Choose success, info, warning, or error states with six positions, custom durations, and optional icons.
Install and ship
Add a React toast in minutes.
Install the package, import its stylesheet once, and use the same notification API from any descendant component.
npm install @miguel-bonifaz/react-toast-notificationsSimple API
Keep notification logic close to the action.
Use the hook inside your existing React components. The provider manages generated IDs, queues, dismissal, and default timing.
<ToastProvider
defaultDuration={3000}
position="bottom-center"
closeLabel="Close notification"
>import {
ToastProvider,
useToast,
} from '@miguel-bonifaz/react-toast-notifications'
import '@miguel-bonifaz/react-toast-notifications/styles.css'
function SaveButton() {
const { toast } = useToast()
return (
<button onClick={() => toast({
message: 'Changes saved.',
type: 'success',
})}>
Save
</button>
)
}
export default function App() {
return (
<ToastProvider>
<SaveButton />
</ToastProvider>
)
}Inclusive feedback
Make status updates understandable.
React Toast Notifications renders a polite live region and status notifications so important feedback can be announced without stealing focus.
Every notification includes a close control with a configurable accessible label. Use a duration of 0 when a message should remain visible until the user dismisses it.
Common questions
React toast notifications, answered.
How do I add toast notifications to a React app?
Install the package, import the stylesheet, wrap your application in ToastProvider, and call toast from a component using useToast.
Can I change the toast position and duration?
Yes. Choose one of six positions on ToastProvider and set a default duration or an individual duration for each notification.
Are the notifications accessible?
The package uses live-region and status semantics, includes a labelled close button, and keeps dismissal available to keyboard users.
Open source React