Package Exports

react-hook-dialog
react-hook-dialog/dist/react-hook-dialog.js
react-hook-dialog/dist/react-hook-dialog.module.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-hook-dialog) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

💬 React Hook Dialog

React hooks for master your dialog(modal) component

English | 简体中文

✨ Features

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

🕶 Example

📦 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>
</>