React Notification Alert is a lightweight, MIT-licensed React component for rendering dismissible toast notifications, built on reactstrap components and React.
What is React Notification Alert?
React Notification Alert is a reusable React component that displays notification alerts in six screen positions, using reactstrap's alert styling and Bootstrap 4. It accepts a JavaScript options object with properties for placement, message, type, icon, auto-dismiss seconds, close button visibility, and z-index, and renders the corresponding notification to the page. The component is published to npm as react-notification-alert and requires reactstrap, bootstrap, and jquery as peer dependencies.
Key Features
- Six placement options — Notifications can appear at top-left, top-center, top-right, bottom-left, bottom-center, or bottom-right by setting the place option to tl, tc, tr, bl, bc, or br.
- Eight alert color types — The type option maps to reactstrap alert colors: primary, secondary, success, danger, warning, info, light, and dark.
- Auto-dismiss timer — Set autoDismiss to a number of seconds; the notification closes automatically, and a value of zero or lower keeps it open until manually dismissed.
- Optional close button — Set closeButton to false to hide the close button from the notification.
- Custom icon support — The icon option accepts a string (e.g. a Now UI Dashboard icon class) to display inside the notification.
- Custom z-index — The zIndex prop on the NotificationAlert component overrides the default z-index of 9999.
- Click callback — The onClick prop fires a function when the user clicks on a notification.
- npm install — Install via npm install --save react-notification-alert and import animate.css separately.
Who is it for?
React developers building dashboard or admin interfaces with Bootstrap 4 who need inline notifications without pulling in a full notification library. The component is designed for projects already using reactstrap, and the example in the README is based on Now UI Dashboard React. Also for developers who want a simple, dependency-light alternative to heavier toast libraries.
What can you do with it?
- Dashboard developers: show success or error alerts from form submissions and API calls, specifying placement and auto-dismiss timing per notification.
- UI component authors: wrap react-notification-alert in a custom hook or context to trigger notifications from anywhere in a React tree.
- Prototyping with Now UI Dashboard React: drop in the component as the notification layer for admin templates that already bundle reactstrap.
How does it work?
Install the package and its dependencies (reactstrap, bootstrap, jquery). In your component, render a NotificationAlert element with a ref callback and optional zIndex and onClick props. Then call the notificationAlert method on that ref with an options object to display a notification.
Pros and cons
- Pros: simple options-object API; six placements; eight types; auto-dismiss and close-button control.
- Cons: requires jquery as a mandatory dependency.
Pricing
Free and open source under the MIT license.
Alternatives
- react-toastify
- notistack
FAQ
Is react-notification-alert free?
Yes, the component is released under the MIT license, so it is free to use in personal and commercial projects.
What dependencies does react-notification-alert require?
It requires reactstrap, bootstrap, and jquery. These must be installed alongside the component for it to work properly.
How do I change where the notification appears?
Set the place option in the options object to one of tl, tc, tr, bl, bc, or br for the screen corner or edge where the notification should render.
Can I disable auto-dismiss?
Yes, set autoDismiss to a value of zero or lower. The notification will then remain until the user closes it or a new action triggers something.
How do I set a custom z-index?
Pass the zIndex prop to the NotificationAlert element itself. If you do not specify it, the default value of 9999 is used.
