dialog-manager-react
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.5 • Public • Published

    Dialog Manager React

    Test npm version code style: prettier

    Install

    npm install dialog-manager-react

    Usage

    Checkout the demo

    Edit solitary-wildflower-rqyxp

    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

    Install

    npm i dialog-manager-react

    DownloadsWeekly Downloads

    9

    Version

    2.0.5

    License

    MIT

    Unpacked Size

    34.3 kB

    Total Files

    13

    Last publish

    Collaborators

    • ajoelp