🥝
AntDesignのカスタムフックの使用例(Modal.useModal)
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