Add ability to use a React Node as useNotify message

[fzaninotto]

You may want to notification message that contains HTML or other React components. To do so, you can pass a React node as the first argument of the notify function.

This allows e.g. using MUI's <Alert> component to display a notification with a custom icon, color, or action.

import { useSubscribe } from "@react-admin/ra-realtime";
import { useNotify, useDataProvider } from "react-admin";
import { Alert } from "@mui/material";

export const ConnectionWatcher = () => {
  const notify = useNotify();
  const dataProvider = useDataProvider();
  useSubscribe("connectedUsers", (event) => {
    if (event.type === "connected") {
      dataProvider
        .getOne("agents", { id: event.payload.agentId })
        .then(({ data }) => {
          notify(
            <Alert severity="info">
                Agent ${data.firstName} ${data.lastName} just logged in
            </Alert>
            );
        });
    }
    if (event.type === "disconnected") {
      dataProvider
        .getOne("agents", { id: event.payload.agentId })
        .then(({ data }) => {
          notify(
            <Alert severity="info">
                Agent ${data.firstName} ${data.lastName} just logged out
            </Alert>
          );
        });
    }
  });
  return null;
};

Note that if you use this ability to pass a React node, the message will not be translated - you'll have to translate it yourself using useTranslate.

[sidescraper]

Interesting example!
But ra-realtime is an enterprise feature. Can this also be used in open react-admin?
thanks for a hint

[fzaninotto]

yes, this is a new capacity added to useNotify, which is part of the open-source core.