React hook for master your dialog component
✨ 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>
</>