fair-rose•5d ago

Override Refine’s default notificationProvider banner with custom styles and messages

I'm using Refine with MUI and want to replace the default notification banners with custom components. Specifically, I’d like to apply my own styles and display tailored success and error messages. What’s the best way to override or extend the notificationProvider for this?

3 Replies

kapa.ai•5d ago

Hi @pato. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To override Refine’s default notification banners with custom styles and messages when using MUI, you should create a custom notificationProvider and pass it to the <Refine> component. This allows you to fully control the appearance and content of your notifications. Steps to Customize NotificationProvider in Refine with MUI 1. Create a Custom Notification Provider: - Implement the notificationProvider object with custom open and close methods. - In the open method, render your own component or use MUI’s Snackbar/Alert with your styles and messages. 2. Pass Your Provider to Refine: - Use the notificationProvider prop on the <Refine> component to inject your custom provider. 3. (Optional) Use RefineSnackbarProvider: - If you want to leverage the built-in context, wrap your app with RefineSnackbarProvider and override the notification logic as needed. #### Example: Custom Notification Provider with MUI

import { Refine } from "@refinedev/core";
import { Snackbar, Alert } from "@mui/material";
import React, { useState } from "react";

// Custom notification provider
const customNotificationProvider = {
  open: ({ message, type, key, description }) => {
    // Implement your logic to show a custom Snackbar/Alert
    // You can use a global state, context, or a custom event system
    // This is a simplified example
    window.dispatchEvent(
      new CustomEvent("custom-notification", {
        detail: { message, type, key, description },
      })
    );
  },
  close: (key) => {
    // Implement your logic to close the notification
    window.dispatchEvent(
      new CustomEvent("close-custom-notification", { detail: { key } })
    );
  },
};
// Example component to listen and display notifications
const CustomNotificationBanner = () => {
  const [open, setOpen] = React.useState(false);
  const [notification, setNotification] = React.useState({});

  React.useEffect(() => {
    const handler = (e) => {
      setNotification(e.detail);
      setOpen(true);
    };
    const closeHandler = () => setOpen(false);

    window.addEventListener("custom-notification", handler);
    window.addEventListener("close-custom-notification", closeHandler);

    return () => {
      window.removeEventListener("custom-notification", handler);
      window.removeEventListener("close-custom-notification", closeHandler);
    };
  }, []);

  return (
    <Snackbar open={open} autoHideDuration={6000} onClose={() => setOpen(false)}>
      <Alert
        onClose={() => setOpen(false)}
        severity={notification.type || "info"}
        sx={{ width: "100%", ...yourCustomStyles }}
      >
        <strong>{notification.message}</strong>
        {notification.description && <div>{notification.description}</div>}
      </Alert>
    </Snackbar>
  );
};

// Usage in your App
const App = () => (
  <>
    <CustomNotificationBanner />
    <Refine notificationProvider={customNotificationProvider} /* ...other props */ />
  </>
);

import { Refine } from "@refinedev/core";
import { Snackbar, Alert } from "@mui/material";
import React, { useState } from "react";

// Custom notification provider
const customNotificationProvider = {
  open: ({ message, type, key, description }) => {
    // Implement your logic to show a custom Snackbar/Alert
    // You can use a global state, context, or a custom event system
    // This is a simplified example
    window.dispatchEvent(
      new CustomEvent("custom-notification", {
        detail: { message, type, key, description },
      })
    );
  },
  close: (key) => {
    // Implement your logic to close the notification
    window.dispatchEvent(
      new CustomEvent("close-custom-notification", { detail: { key } })
    );
  },
};
// Example component to listen and display notifications
const CustomNotificationBanner = () => {
  const [open, setOpen] = React.useState(false);
  const [notification, setNotification] = React.useState({});

  React.useEffect(() => {
    const handler = (e) => {
      setNotification(e.detail);
      setOpen(true);
    };
    const closeHandler = () => setOpen(false);

    window.addEventListener("custom-notification", handler);
    window.addEventListener("close-custom-notification", closeHandler);

    return () => {
      window.removeEventListener("custom-notification", handler);
      window.removeEventListener("close-custom-notification", closeHandler);
    };
  }, []);

  return (
    <Snackbar open={open} autoHideDuration={6000} onClose={() => setOpen(false)}>
      <Alert
        onClose={() => setOpen(false)}
        severity={notification.type || "info"}
        sx={{ width: "100%", ...yourCustomStyles }}
      >
        <strong>{notification.message}</strong>
        {notification.description && <div>{notification.description}</div>}
      </Alert>
    </Snackbar>
  );
};

// Usage in your App
const App = () => (
  <>
    <CustomNotificationBanner />
    <Refine notificationProvider={customNotificationProvider} /* ...other props */ />
  </>
);

Notes - You can fully control the styles and content of the notification by customizing the CustomNotificationBanner component. - The notificationProvider’s open and close methods can be implemented in any way that fits your app’s architecture. - You can also customize messages for success and error notifications by using the successNotification and errorNotification props on data hooks like useForm, useUpdate, etc. This allows you to tailor the content of each notification as needed Customizing Notifications. For more details on the notificationProvider interface and usage, see the official documentation Notification Provider. --- Summary:
Override Refine’s default notification banners in MUI by creating and injecting a custom notificationProvider. Render your own styled components for notifications, and use the successNotification/errorNotification props on hooks to customize messages. This approach gives you full control over both the look and content of your notifications. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5d ago

<@1286478370686763120> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

fair-roseOP•5d ago

can we implement error handling using notificationProvider or is it wise to do so?

Override Refine’s default notificationProvider banner with custom styles and messages

Did you find this page helpful?