? React Hook Dialog

React hook for master your dialog component

version license size

✨ Features

  • ?‍♂️ TYPE SAFE
  • ? Awesome DX
  • ? Super light

? Installation

npm install react-hook-dialog

? API

? createDialogs

Initialize your dialogs name and props

// In main.tsx or lib/dialog.ts

type FirstDialogProps = { title: string; content: string };
type SecondDialogProps = { lol: string; olo: string };

// For type-safe, you can provide 2 generic types
// 1. The union type of your dialog props
// 2. The union type of your dialog names
export const dialogs = createDialogs<
  FirstDialogProps | SecondDialogProps,
  'firstDialogName' | 'secondDialogName'
>({
  firstDialogName: {
    title: '',
    content: '',
  },
  secondDialogName: {
    lol: '',
    olo: '',
  },
});

? DialogProvider

// In main.tsx

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

? createDialogHooks

Create type-safe dialog hooks

// In lib/dialog.ts

export const dialog = createDialogHooks(dialogs);

? useDialogController

A hook to control your dialog component

// In your dialog component

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

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

? DialogController

The component form of useDialogController

<DialogController
  dialogs={dialogs}
  name="dialogName"
  render={({ isOpen, handleClose, props }) => (
    <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

// In any component

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

GitHub

View Github