Dialog Manager React

Install

npm install dialog-manager-react

Usage

Checkout the demo

Create a file in your project for defining your dialogs

DialogManager.tsx

import { lazy } from 'react'
import { createDialogWrapper } from "dialog-manager-react";

const Dialogs = {
    'loginDialog': Dialog, // Use functional components
    'loginDialog2': lazy(() => import('./LoginDialog')) // Use lazy loaded components
};

const { DialogManager, useDialogs } = createDialogWrapper(Dialogs);

export {
    DialogManager,
    useDialogs
}

Now in the root of the project you'll need to set up the DialogManager

index.tsx

import { DialogManager } from './DialogManager'

ReactDOM.render(
    <DialogManager>
        <App />
    </DialogManager>,
    document.getElementById('root') as HTMLElement
);

Create a Dialog

Dialog.tsx

import { DialogProps } from "dialog-manager-react";

type LoginDialogProps = { title: string } & DialogProps

export default function LoginDialog(props: LoginDialogProps) {
    const { closeDialog, active, title } = props;
    return <Component />
}

Using the hook inside a component

import { useDialogs } from './DialogManager'

export default function LoginButton() {
    const { openDialog, closeDialog } = useDialogs()
    
    const open = () => {
        openDialog('loginDialog', { title: 'This is the title' })
    }

    const close = () => {
        closeDialog()
    }
    
    return (
        <>
            <button onClick={open}>
                Open
            </button>
            <button onClick={close}>
                Close
            </button>
        </>
    )
}

API

createDialogWrapper(dialogs: object, options: DialogWrapperOptions)

dialogs

A key value of dialog names and ReactComponents.

const Dialogs = {
    'loginDialog': Dialog, // Use functional components
    'loginDialog2': lazy(() => import('./LoginDialog')) // Use lazy loaded components
};

options

key	default	Description	Type
showTimeout	200	Timeout between when the closeModal is called and the modal is removed from the dom	number
suspenseFallback	null	Fallback loading state for lazy loaded components	ReactNode

useDialog()

A hook to access the dialog context

returns

openDialog(name: DialogName, props: ComponentProps)

name

Name of the dialog you defined

props

The props of that dialog component