Open reboottime opened 11 months ago
Mantine UI's notification system operates as a toast solution, simplifying the process of programmatically.
Mantine UI notification system comprises three primary parts:
Notifications
component, which serves as both a container for programmatically added notifications and a functional element used in notifications.Notification
component, responsible for holding notification information.const toast = {
error: (message: string, options?: NotificationProps) => {
notifications.show({
...options,
color: 'red',
icon: <IconX size="1.1rem" />,
message,
title: 'Error'
});
},
success: (message: string, options: NotificationProps) => {
notifications.show({
...options,
color: 'green',
icon: <IconCheck size="1.1rem" />,
message,
title: 'Success'
});
},
info: (message: string, options?: NotificationProps) => {
notifications.show({
...options,
color: 'cyan',
icon: <IconInfoCircle size="1.1rem" />,
message,
title: 'Info'
});
}
};
NotificationProvider
that accepts value as bellow:
useState
Bellow is the sample code:
export const NotificationProvider = ({children}) => {
const [notifications, setNotifications] = useState([]);
const value = useMemo({
notifications,
addNotification: (notification) => setNotifications(prevNotifications => [prevNotifications, notification])
}, [notifications]);
return <NotificationProvider value={value}>{children}</NotificationProvider>
};
// How we use the Notification system
const App = () => {
return <NotificationProvider>{/**some other code**/} </NotificationProvider>
};
While this approach is functional, the drawback are
Mantine UI notification system relies on use-queue
to limit what notifications are should be rendered, and what notifications are waiting in the notification system's queue
const { state, queue, update, cleanQueue } = useQueue<NotificationProps>({
initialValues: [],
limit,
});
Mantine Notification System employs window as the cross components communication channel for notifications management. Here are how it works under the hood
Following are some key source code screenshot
Overview
This article talks about
Notification Vs Alert
At UI and accessibility level, the Notification and Alert components exhibit a striking similarity. However, their usage differs in the following ways: