toasts/notifications

Using Ant Design and the built in useNotificationProvider from refine/antd, how can i make custom ontifications

2 Replies

Hi @PIGFY. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To create custom notifications using Ant Design and the built-in useNotificationProvider from @refinedev/antd, you can follow these steps: 1. Import the necessary modules: You need to import Refine from @refinedev/core and useNotificationProvider from @refinedev/antd. 2. Set up the Refine component: Pass the useNotificationProvider to the notificationProvider prop of the Refine component. 3. Use the useNotification hook: This hook allows you to open and close notifications programmatically. Here is an example of how you can set this up in your App.tsx and a sample component to trigger notifications: App.tsx

import React from "react";
import { Refine } from "@refinedev/core";
import { useNotificationProvider, RefineThemes } from "@refinedev/antd";
import { ConfigProvider, App as AntdApp } from "antd";

const App = () => {
  return (
    <ConfigProvider theme={RefineThemes.Green}>
      <AntdApp>
        <Refine notificationProvider={useNotificationProvider}>
          {/* Your routes and other components */}
        </Refine>
      </AntdApp>
    </ConfigProvider>
  );
};

export default App;

import React from "react";
import { Refine } from "@refinedev/core";
import { useNotificationProvider, RefineThemes } from "@refinedev/antd";
import { ConfigProvider, App as AntdApp } from "antd";

const App = () => {
  return (
    <ConfigProvider theme={RefineThemes.Green}>
      <AntdApp>
        <Refine notificationProvider={useNotificationProvider}>
          {/* Your routes and other components */}
        </Refine>
      </AntdApp>
    </ConfigProvider>
  );
};

export default App;

HomePage.tsx

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>
  );
};

In this example: - The App.tsx file sets up the Refine component with the useNotificationProvider from @refinedev/antd. - The HomePage.tsx file demonstrates how to use the useNotification hook to open and close notifications. For more details, you can refer to the Refine documentation on notifications (https://refine.dev/docs/ui-integrations/ant-design/introduction/#notifications) and the example of using the useNotification hook (https://refine.dev/docs/guides-concepts/notifications/#built-in-notification-providers). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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