ratty-blush•4w ago

How to create notification provider from scratch?

How to create notification provider from scratch and show the notification once an action is success or failed ? for example after updating a data, or creating a record?

2 Replies

kapa.ai•4w ago

Hi @regn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To create a notification provider from scratch in Refine, you need to implement an object with open and close methods that conform to the NotificationProvider interface. This provider can then be passed to the <Refine> component via the notificationProvider prop. Here’s how you can do it, using a popular toast library like react-toastify as an example: --- 1. Install a Toast Library For example, with react-toastify:

npm install react-toastify

npm install react-toastify

How to create a notification provider with react-toastify --- 2. Create the Notification Provider Create a file (e.g., src/providers/notificationProvider.tsx) and implement the provider:

import { NotificationProvider } from "@refinedev/core";
import { toast } from "react-toastify";

export const notificationProvider: NotificationProvider = {
  open: ({ key, message, type }) => {
    if (toast.isActive(key)) {
      toast.update(key, {
        render: message,
        type,
      });
    } else {
      toast(message, {
        toastId: key,
        type,
      });
    }
  },
  close: (key) => {
    toast.dismiss(key);
  },
};

import { NotificationProvider } from "@refinedev/core";
import { toast } from "react-toastify";

export const notificationProvider: NotificationProvider = {
  open: ({ key, message, type }) => {
    if (toast.isActive(key)) {
      toast.update(key, {
        render: message,
        type,
      });
    } else {
      toast(message, {
        toastId: key,
        type,
      });
    }
  },
  close: (key) => {
    toast.dismiss(key);
  },
};

Notification Provider - Creating from scratch --- 3. Add Toast Container to Your App In your main app file, add the ToastContainer component and pass your provider to <Refine>:

import { Refine } from "@refinedev/core";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import { notificationProvider } from "./providers/notificationProvider";
const App = () => (
  <Refine notificationProvider={notificationProvider}>
    {/* ... */}
    <ToastContainer />
  </Refine>
);

import { Refine } from "@refinedev/core";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import { notificationProvider } from "./providers/notificationProvider";
const App = () => (
  <Refine notificationProvider={notificationProvider}>
    {/* ... */}
    <ToastContainer />
  </Refine>
);

Notification Provider - Usage --- 4. Show Notifications on Success or Failure Refine’s data hooks (like useUpdate, useCreate, etc.) automatically trigger notifications using the provider when actions succeed or fail. You can also customize these notifications per action:

import { useUpdate } from "@refinedev/core";

const { mutate } = useUpdate();

mutate({
  successNotification: () => ({
    message: "Update successful!",
    type: "success",
  }),
  errorNotification: () => ({
    message: "Update failed!",
    type: "error",
  }),
});

import { useUpdate } from "@refinedev/core";

const { mutate } = useUpdate();

mutate({
  successNotification: () => ({
    message: "Update successful!",
    type: "success",
  }),
  errorNotification: () => ({
    message: "Update failed!",
    type: "error",
  }),
});

Customizing Notifications Alternatively, you can trigger notifications manually anywhere in your app using the useNotification hook:

import { useNotification } from "@refinedev/core";

const { open } = useNotification();

open?.({
  key: "unique-key",
  message: "Action completed!",
  type: "success",
});

import { useNotification } from "@refinedev/core";

const { open } = useNotification();

open?.({
  key: "unique-key",
  message: "Action completed!",
  type: "success",
});

Notification Provider - useNotification hook --- Summary:
- Implement a notificationProvider with open and close methods. - Pass it to <Refine>. - Use Refine’s hooks or useNotification to show notifications on action success or failure. This approach works with any toast library, not just react-toastify. You can adapt the logic for other libraries like react-hot-toast as well. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

How to create notification provider from scratch?

Did you find this page helpful?