🍉

AntDesignのカスタムフックの使用例(Modal.useModal)

2024/01/14に公開

Ant Designは、ReactのUIデザインライブラリで、いくつかの便利なカスタムフック(useXXX形式のフック)を提供している。

Ant DesignのModal.useModalを使用したReactコンポーネントの実装例

import { Modal } from "antd";
const [modal, contextHolder] = Modal.useModal();

const itemName = "Item1"; 
const handleDelete = (name) => {
  // 削除処理
};

return (
  <>
    <button
      onClick={() =>
        modal.confirm({ //Ant Designのカスタムフックを使用してModalを表示
          content: `Delete ${itemName} .`,
          title: "Delete",
          onOk: () => handleDelete(itemName),
        })
      }
    >
      Delete
    </button>
    {contextHolder}
  </>
);

Discussion