show notification using useModal

How to show center notifications like sweet alert using useModal

2 Replies

Hi @viveksingh0143. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To show notifications using useModal in a manner similar to SweetAlert, you can leverage the useModal hook from Refine's Ant Design integration. This hook helps you manage the visibility of modals, which can be used to display notifications in the center of the screen. Here is an example of how you can achieve this:

import React from "react";
import { useModal } from "@refinedev/antd";
import { Modal, Button } from "antd";

export const NotificationModal: React.FC = () => {
  const { show, close, modalProps } = useModal();

  return (
    <>
      <Button type="primary" onClick={show}>
        Show Notification
      </Button>
      <Modal {...modalProps} onCancel={close} footer={null}>
        <p>Notification Content</p>
        <Button type="primary" onClick={close}>
          Close
        </Button>
      </Modal>
    </>
  );
};

import React from "react";
import { useModal } from "@refinedev/antd";
import { Modal, Button } from "antd";

export const NotificationModal: React.FC = () => {
  const { show, close, modalProps } = useModal();

  return (
    <>
      <Button type="primary" onClick={show}>
        Show Notification
      </Button>
      <Modal {...modalProps} onCancel={close} footer={null}>
        <p>Notification Content</p>
        <Button type="primary" onClick={close}>
          Close
        </Button>
      </Modal>
    </>
  );
};

In this example: - The useModal hook is used to manage the modal's visibility. - The show function is called when the "Show Notification" button is clicked, which opens the modal. - The close function is called when the "Close" button inside the modal is clicked, which closes the modal. This setup will display a modal in the center of the screen, similar to how SweetAlert works. For more details, you can refer to the useModal documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal/#example). If you need to customize the modal further, you can adjust the Modal component's properties and content as needed. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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