Notification

A notification compoonent based on Shadcn’s sonner toasts, supporting undoable actions.

Usage

The <Notification> component is already included in the default <Layout>. It will display notifications triggered with the useNotify hook.

import { useNotify } from 'ra-core';

const NotifyButton = () => {
    const notify = useNotify();
    const handleClick = () => {
        notify(`Comment approved`, { type: 'success' });
    }
    return <button onClick={handleClick}>Notify</button>;
};

You can customize the notification component by editing the @/components/admin/notification.tsx file.

If you write a custom layout, make sure to include the <Notification> component somewhere in your component tree, preferably near the root:

<Notification />

Undoable Mutations

The mutation hooks from ra-core, such as useDelete and useUpdate, support undoable mode. When using undoable mutations, the notification component will display an “Undo” button in the toast message, and the actual mutation will be delayed until the undo timeout expires.

To enable the “undo” button in a notification, pass the undoable: true option to the useNotify call:

import { useDelete, useNotify } from 'ra-core';

const DeletePostButton = ({ id }) => {
    const notify = useNotify();
    const [deleteOne] = useDelete();
    const handleClick = () => {
        deleteOne(
            'posts',
            { id },
            {
                mutationMode: 'undoable',
                onSuccess: () => {
                    notify('Post deleted', { type: 'info', undoable: true });
                }
            }
        );
    }
    return <button onClick={handleClick}>Delete</button>;
};