💬 React Hook Dialog

React hooks for master your dialog(modal) component

English | 简体中文

✨ Features

• 🧙‍♂️ TYPE SAFE
• 🐎 Awesome DX
• 🍃 Super light

🕶 Example

• Material UI
• Ant Design

📦 Installation

npm install react-hook-dialog

🎯 Quickstart

lib/dialog.ts

import { createDialogs, createDialogHooks } from 'react-hook-dialog';

export const dialogs = createDialogs({
  customDialog: { title: '', content: '' },
});

export const dialog = createDialogHooks(dialogs);

components/CustomDialog.tsx

import { Dialog } from 'your-ui-lib';

import { dialog } from '../lib/dialog';

const CustomDialog = () => {
  const { isOpen, handleClose, props } =
    dialog.useDialogController('customDialog');

  return (
    <Dialog open={isOpen} onClose={handleClose}>
      <h3>{props.title}</h3>
      <p>{props.content}</p>
    </Dialog>
  );
};

export default CustomDialog;

main.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { DialogProvider } from 'react-hook-dialog';

import App from './App';
import CustomDialog from './components/CustomDialog';
import { dialogs } from './lib/dialog';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <DialogProvider dialogs={dialogs}>
      <App />
      <CustomDialog />
    </DialogProvider>
  </React.StrictMode>,
);

anywhere

import { dialog } from 'dir to lib/dialog';

const YourComponent = () => {
  const { open, close, isOpen } = dialog.useDialog('customDialog', {
    title: 'Some Title',
    content: 'some content',
  });

  return (
    <>
      <div>Dialog Status: {isOpen ? 'open' : 'closed'}</div>
      <button onClick={() => open()}>Open Dialog</button>
      <button onClick={() => close()}>Close Dialog</button>
      <button onClick={() => open({ title: 'Another Title' })}>
        Open Another Dialog
        {/* { title: 'Another Title', content: 'some content' } */}
      </button>
    </>
  );
};

export default YourComponent;

🕹 API

🔗 createDialogs

Initialize your dialogs name and props

const dialogs = createDialogs({
  firstDialogName: {
    title: '',
    content: '',
  },
  secondDialogName: {
    lol: '',
    olo: '',
  },
});

🔗 DialogProvider

<DialogProvider dialogs={dialogs}>
  <App />
  <FirstDialog />
  <SecondDialog />
</DialogProvider>

🔗 createDialogHooks

Create type-safe dialog hooks

const dialog = createDialogHooks(dialogs);

🔗 useDialogController

A hook to control your dialog component

const { isOpen, handleClose, props } = dialog.useDialogController('dialogName');

return <Dialog open={isOpen} onClose={handleClose} {...props}>

🔗 useDialog

A hook to use any dialogs anywhere!

Note
You may have found that the dialog props can be defined in 3 places
Priority: open > useDialog > createDialogs

const { open, close, isOpen } = dialog.useDialog(
  'dialogName',
  { title: 'New Title' }, // Dialog props
);

<>
  <div>Dialog Status: {isOpen ? 'open' : 'closed'}</div>
  <button onClick={() => open({ title: 'New New Title' })}>Open</button>
  <button onClick={() => close()}>Close</button>
</>