useNotification

useNotification can be used to open or close notification at any time. It returns the open and close method from notificationProvider under the hood.

Usage

Here is a basic example of how to use useNotification hook.

localhost:3000/products

import { useNotification } from "@refinedev/core";
import { Button, Stack } from "@mui/material";

const ExamplePage: React.FC = () => {
  const { open, close } = useNotification();

  return (
    <Stack spacing={2} direction="row">
      <Button
        color="success"
        variant="outlined"
        size="small"
        onClick={() =>
          open?.({
            type: "success",
            message: "Success",
            description: "Success description",
          })
        }
      >
        Success
      </Button>
      <Button
        color="error"
        variant="outlined"
        size="small"
        onClick={() =>
          open?.({
            type: "error",
            message: "Error",
            description: "Error description",
          })
        }
      >
        Error
      </Button>

      <Button
        color="secondary"
        variant="outlined"
        size="small"
        onClick={() =>
          open?.({
            type: "progress",
            message: "Progress",
            undoableTimeout: 5,
            cancelMutation: () => {
              alert("cancelMutation");
            },
          })
        }
      >
        Progress
      </Button>
    </Stack>
  );
};

Properties

open

You can call this method to open a new notification box.

const { open } = useNotification();

open?.({
  type: "success",
  message: "Success",
  description: "This is a success message",
});

For more information, refer to the Open Notification Params interface→

close

You can close a notification with a key.

const { close } = useNotification();

close?.("notification-key");

You must pass a key to the open method. This key is used to close the notification.

FAQ

How to use a undoable notification?

It should be type=progress to show undoable notifications. A function can then be triggered.

const { open } = useNotification();

open?.({
  type: "progress",
  message: "Progress",
  undoableTimeout: 5,
  cancelMutation: () => {
    // when undo button is clicked, run this callback
  },
});

API Reference

Return Values

Property	Description	Type
open	Open Notification Params	`Open Notification Params`
close	Close Notification Params	`(key: string) => void;`

Usage​

Properties​

open​

close​

FAQ​

How to use a undoable notification?​

API Reference​

Return Values​