Package Exports

dialog-manager-react

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (dialog-manager-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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