cloudy-cyan•6mo ago

Trigger built in notifications

How can I show a notification using the built in notification snackbars? Is there any method I can use as a service without having to reimplement notification provider?

2 Replies

kapa.ai•6mo ago

Hi @❴𝖒𝖔𝖗❵. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can use the built-in notification providers in Refine to show notifications without having to reimplement the notification provider. Refine offers out-of-the-box support for several design systems and UI libraries such as Material UI, Ant Design, Mantine, and Chakra UI. To use a built-in notification provider, you need to import the notification provider and pass it as a prop to the Refine component. Here is an example of how to do this:

import { Refine } from "@refinedev/core";  
import { notificationProvider } from "@refinedev/chakra";  
  
const App = () => {  
 return (  
 <Refine  
 //...  
 notificationProvider={notificationProvider}  
 />  
 );  
};

import { Refine } from "@refinedev/core";  
import { notificationProvider } from "@refinedev/chakra";  
  
const App = () => {  
 return (  
 <Refine  
 //...  
 notificationProvider={notificationProvider}  
 />  
 );  
};

(Source: refine.dev (https://refine.dev/blog/react-toastify#notification-providers-in-refine)) To open and close notifications, you can use the useNotification hook. Here is an example:

import React from "react";
import { useNotification } from "@refinedev/core";
import { Button, Col, Row } from "antd";

export const HomePage: React.FC = () => {
  const { open, close } = useNotification();
return (
      <Row
          gutter={[16, 16]}
          style={{
              justifyContent: "center",
              alignItems: "center",
              height: "100vh",
          }}
      >
          <Col>
              <Button
                  type="primary"
                  onClick={() => {
                      open?.({
                          type: "success",
                          message: "Notification Title",
                          description:
                              "This is the content of the notification.",
                          key: "notification-key",
                      });
                  }}
              >
                  Open Notification
              </Button>
          </Col>
          <Col>
              <Button
                  type="default"
                  onClick={() => {
                      close?.("notification-key");
                  }}
              >
                  Close Notification
              </Button>
          </Col>
      </Row>
  );
};

import React from "react";
import { useNotification } from "@refinedev/core";
import { Button, Col, Row } from "antd";

export const HomePage: React.FC = () => {
  const { open, close } = useNotification();
return (
      <Row
          gutter={[16, 16]}
          style={{
              justifyContent: "center",
              alignItems: "center",
              height: "100vh",
          }}
      >
          <Col>
              <Button
                  type="primary"
                  onClick={() => {
                      open?.({
                          type: "success",
                          message: "Notification Title",
                          description:
                              "This is the content of the notification.",
                          key: "notification-key",
                      });
                  }}
              >
                  Open Notification
              </Button>
          </Col>
          <Col>
              <Button
                  type="default"
                  onClick={() => {
                      close?.("notification-key");
                  }}
              >
                  Close Notification
              </Button>
          </Col>
      </Row>
  );
};

(Source: refine.dev (https://refine.dev/docs/guides-concepts/notifications#built-in-notification-providers)) Please note that in most cases, you won't need to manually open and close notifications, as Refine typically manages notifications for you automatically. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

<@245678638211661824> kapa.ai is still learning and improving, please let us know how it did by reacting below