Mantine Notifications
Installation
Package depends on @asuikit/core
and @asuikit/hooks
.
Install with yarn:
Install with npm:
Demo
Usage
Add Notifications
component anywhere in your application, usually it is placed
inside MantineProvider next to your App
component:
Then use notifications.show
function anywhere in your application:
Functions
Notifications system is based on custom events,
@asuikit/notifications
package exports the following functions:
- notifications.show – adds given notification to notifications list or queue depending on current state and limit
- notifications.update – updates notification that was previously added to the state or queue
- notifications.hide – removes notification with given id from notifications state and queue
- notifications.clean – removes all notifications from notifications state and queue
- notifications.cleanQueue – removes all notifications from queue
All functions can be imported from @asuikit/notifications
package and can be used in any part of your application:
Notification props
Notification state item can have these properties:
- id – notification id, it is used to update and remove notification, by default id is randomly generated
- withBorder – determines whether notification should have border
- withCloseButton – determines whether close button should be visible
- 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
false
to disable auto close - message – required notification body
- color, icon, title, radius, className, style, sx, loading – props added to Notification component
All properties except message are optional.
Notifications preview (message
prop used as children
):
Customize notification styles
You can use sx
, style
, className
or Styles API classNames
, styles
props to customize notification styles:
Notifications container position
Notifications
renders notifications container with fixed position inside Portal.
Position cannot be changed per notification. Notifications
supports the following positions:
top-left
top-right
top-center
bottom-left
bottom-right
bottom-center
Limit and queue
Notifications
uses use-queue hook to manage state.
You can limit maximum amount of notifications that can be displayed by setting
limit
prop on Notifications
:
All notifications added after limit was reached will be added into queue and displayed when notification from current state is closed.
Remove notifications from state and queue
To remove specific notification from state or queue use notifications.hide
function:
Use notifications.cleanQueue
function to remove all notifications that are not currently displayed and
notifications.clean
function to remove all notifications from state and queue:
Update notification
Auto close
You can configure auto close timeout with Notifications
:
Or in notifications.show
/notifications.update
functions:
notifications.show
and notifications.update
functions autoClose
prop always has higher priority.
Multi Notifications Positions
Notifications component props
Name | Type | Description |
---|---|---|
autoClose | number | false | Auto close timeout for all notifications, false to disable auto close, can be overwritten for individual notifications by notifications.show function |
containerWidth | string | number | Notification width, cannot exceed 100% |
eventKey | string | multi notifications event key |
limit | number | Maximum amount of notifications displayed at a time, other new notifications will be added to queue |
notificationMaxHeight | string | number | Notification max-height, used for transitions |
position | "bottom-center" | "top-center" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | Notifications position |
target | string | HTMLElement | Target element of Portal component |
transitionDuration | number | Notification transitions duration, 0 to turn transitions off |
zIndex | ZIndex | Notifications container z-index |