Install with npm:
Install with yarn:
Wrap your application with NotificationsProvider. Important: if you use MantineProvider, NotificationsProvider must be placed inside:
Use use-notifications hook at any place in your application:
Hook returns object with properties:
- notifications – list of notifications that are currently displayed
- queue – list of notifications in queue
- showNotification – adds given notification to notifications list or queue depending on current state and limit, returns notification id
- updateNotification – updates notification with given id
- hideNotification – removes notification with given id from notifications list and queue
- clean – removes all notifications from notifications list and queue
- cleanQueue – removes all notifications from queue
Notification state item can have these properties:
- id – notification id, it is used to update and remove notification, by default id is randomly generated
- disallowClose – removes close button, notification can be closed only programmatically
- onClose – calls when notification is unmounted
- onOpen – calls when notification is mounted
- autoClose – defines timeout in ms on which notification will be automatically closed, use
falseto disable auto close
- message – required notification body
- color, icon, title, radius, className, style, loading – props spread to Notification component
All properties except message are optional.
Notifications preview (message prop used as children):
NotificationsProvider renders notifications container with fixed position inside Portal. Position cannot be changed per notification.
NotificationsProvider uses use-queue hook to manage state.
You can limit maximum amount of notifications that can be displayed by setting
limit prop on NotificationsProvider:
All notifications added after limit was reached will be added into queue and displayed when notification from current state is closed.
To remove specific notification from state or queue use
cleanQueue handler to remove all notifications that are not currently displayed and
clean handler to remove all notifications from state and queue:
showNotification handler returns notification id, you can use it to update notification:
You can configure auto close timeout in NotificationsProvider:
Or in use-notifications hook handlers:
showNotification and updateNotification have higher priority.
You can render any react node in notification message, for example, input or button. Combine this option with other settings to achieve the desired behavior: