Notifications

The notifications package aims to show floating notifications (notification toasts). Notifications can be customized, and dismissed automatically.

setup

It is a separate package with a separate stylesheet:

npm install @mantine/notifications

import "@mantine/notifications/styles.css" // here

We add the Notifications placeholder component somewhere in the app:

<MantineProvider>
    <Notifications />
    {/* Your app here */}
</MantineProvider>

Note:

• it must be placed within MantineProvider
• it doesn't wrap the app
• is a placeholder: Mantine only needs one Notifications component, and uses it to display one or more notification toasts

create and dismiss notification toasts

We use an imperative API to show and dismiss notifications toasts:

import { notifications } from "@mantine/notifications"
//
notifications.show()
notifications.update()
notifications.hide()

creating a notification

To create a notification, we set:

• message: the body of the message (required)
• title: the title of the massage
• an id, if we intend to update this notification later on
• loading to display a spinner
• autoClose: we keep the notification on-screen until dismissed (autoClose: false), or set an auto-close timer in milliseconds.
• position to set it somewhere else than bottom-right.

notifications.show({
    id: task.id,
    color: "white",
    title: "Generating...",
    message: task.prompt,
    autoClose: false,
    loading: true,
    position: "top-right",
    radius: "xl",
    withCloseButton: false,
})

update a notification

To update the notification, we provide its id.

To convey completion, we can:

• show a completion message and icon
• plan for auto-close after a delay:

notifications.update({
    id: task.id,
    color: "gray",
    title: "Image successfully created",
    message: "..."
    loading: false,
    autoClose: 2500,
    icon: <IconCheck size={18} />,
})