React Hook Dialog: use hook to master your dialog components

npm install react-hook-dialog

import { createDialogs, createDialogHooks } from "react-hook-dialog";type CustomDialogProps = { title: string; content: string };export const dialogs = createDialogs<CustomDialogProps, "customDialog">({  customDialog: { title: "", content: "" }});export const dialog = createDialogHooks(dialogs);

import { dialog } from "../lib/dialog";import {  Dialog,  DialogContent,  DialogTitle,  DialogContentText,  Button,  DialogActions} from "@mui/material";const CustomDialog: React.FC = () => {  const { isOpen, handleClose, props } = dialog.useDialogController(    "customDialog"  );  return (    <Dialog open={isOpen} onClose={handleClose}>      <DialogTitle>{props.title}</DialogTitle>      <DialogContent>        <DialogContentText>{props.content}</DialogContentText>      </DialogContent>      <DialogActions>        <Button onClick={handleClose}>Close</Button>      </DialogActions>    </Dialog>  );};export default CustomDialog;

import App from "./App";import React from "react";import ReactDOM from "react-dom/client";import CustomDialog from "./components/CustomDialog";import { dialogs } from "./lib/dialog";import { DialogProvider } from "react-hook-dialog";ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(  <React.StrictMode>    <DialogProvider dialogs={dialogs}>      <App />      <CustomDialog />    </DialogProvider>  </React.StrictMode>);

import { Button, Stack, Typography } from "@mui/material";import { dialog } from "./lib/dialog";const App: React.FC = () => {  const { isOpen, open, close } = dialog.useDialog("customDialog", {    title: "Some Title",    content: "some content"  });  return (    <>      <Typography>Dialog Status: {isOpen ? "open" : "closed"}</Typography>      <Stack direction="row" spacing={2}>        <Button variant="contained" onClick={() => open()}>          Open Dialog        </Button>        <Button variant="contained" onClick={() => close()}>          Close Dialog        </Button>        <Button          variant="outlined"          onClick={() => open({ title: "Another Title" })}        >          Open Another Dialog        </Button>      </Stack>    </>  );};export default App;