🪟 easy-dialogs

Easy to use, function-based, type safe dialogs manager for React.

View demo / NPM

Installation

1# yarn
2yarn install easy-dialogs
3
4# npm
5npm install easy-dialogs
6
7# pnpm
8pnpm install easy-dialogs

Usage

1. Import

into your root layout.

1import { Dialog } from "easy-dialogs"
2
3function App() {
4    return (
5        <section>
6            {/* ...rest of your root layout */}
7            <Dialog />
8        </section>
9    )
10}
11
12export default App
13

2. Create an array with dialogs list

1import DialogComponent from "../components/DialogComponent";
2
3export const dialogs = [
4    { id: "test-dialog", component: DialogComponent }
5    // Here you can add more dialogs
6] as const

3. Import "useDialogManager()" hook inside React component

1import { useDialogManager } from "easy-dialogs";
2import { dialogs } from "../libs/dialogs";
3
4const List = () => {
5    const { callDialog } = useDialogManager(dialogs)
6    return (
7        <div>
8            <button onClick={async () => {
9                const result = await callDialog("test-dialog")
10                if(result) {
11                    alert('Result is success!') 
12                }else{
13                    alert('Result is failure :(') 
14                }
15            }}>Call me!</button>
16        </div>
17    );
18}
19
20export default List;

❗ Important notes

• Dialog components MUST return some value. callDialog() function awaits for the response from the Dialog component.

  Example:

  1type ExampleDialogType = {
  2    onClose: (val: boolean) => void,
  3    additionalProps?: {
  4        id: string
  5    }
  6}
  7
  8const DialogComponent: React.FC<ExampleDialogType> = ({ onClose, additionalProps }) => {
  9    return (
  10        <div>
  11            <h1>Example dialog {additionalProps?.id}</h1>
  12            <button onClick={() => onClose(true)}>Success!</button>
  13            <button onClick={() => onClose(false)}>Failure :(</button>
  14        </div>
  15    );
  16}
  17
  18export default DialogComponent;

• To handle Exit Animations in your dialog component, first add the useExitAnimation: true property in dialogs list.

  1export const dialogs = [
  2    { id: "test-dialog", component: DialogComponent, useExitAnimation: true }
  3    // Here you can add more dialogs
  4] as const

  Then, in your dialog component you need to set the data-state property and the onAnimationEnd() function and pass it into the dialog parent.

  1type ExampleDialogType = {
  2    onClose: (val: boolean) => void,
  3    ["data-state"]?: string,
  4    onAnimationEnd?: () => void;
  5    additionalProps?: {
  6        id: string
  7    }
  8}
  9
  10const DialogComponent: React.FC<ExampleDialogType> = ({ onClose, additionalProps, ...rest }) => {
  11    return (
  12        <div data-state={rest["data-state"]} onAnimationEnd={rest.onAnimationEnd}>
  13            ...
  14        </div>
  15    );
  16}
  17
  18export default DialogComponent;

  The package will add data-state="closed" attribute while everything has been set up properly. In order to handle animations, you must add exit animation for example using TailwindCSS: data-[state=closed]:!animate-fadeout. When useExitAnimation is set to true and the animation is not set up, then the dialog won't close!

• For Next.js users: <Dialog /> component MUST be rendered on the client.

Update history

- 0.1.7 - Added `dialogKeyId` property in Dialog instance object
- 0.1.6:
    - Added support for dialog exit animations
    - Added 'getActiveDialogs()' export
- 0.1.5 - Fixed additionalProps type issue
- 0.1.4 - Added support for multiple dialogs rendered at once.

Acknowledgements

• Jotai