Skip to content
React Dialog Async
Blog

Getting Started

  1. Install the package using your package manager of choice.

    Terminal window
    npm i react-dialog-async

  2. Wrap your app with <DialogProvider/>.

    Layout.tsx
    import { DialogProvider } from 'react-dialog-async';
    

    const Layout = () => {
      return (
        <DialogProvider>
          <App />
        </DialogProvider>
      );
    }

  3. Add a <DialogOutlet/> to your component tree. This is where dialogs will be rendered, so it should be nested inside all providers.

    Layout.tsx
    import { DialogProvider, DialogOutlet } from 'react-dialog-async';
    

    const Layout = () => {
      return (
        <DialogProvider>
          <App />
          <DialogOutlet/>
        </DialogProvider>
      );
    }

  4. Create a dialog component, and start using it in your app with the useDialog() hook.

    MyDialog.tsx
    import { AsyncDialogProps } from 'react-dialog-async';
    import { Dialog } from '...'; // Import dialog from UI library of your choice
    

    export const MyDialog = ({ isOpen, handleClose }: AsyncDialogProps) => {
      return (
        <Dialog open={isOpen} onClose={() => handleClose()}>
          <p>{'Hello world!'}</p>
          <button onClick={() => handleClose()}>Ok</button>
        </Dialog>
      );
    }
    Page.tsx
    import { useDialog } from 'react-dialog-async';
    import { MyDialog } from './MyDialog';
    

    export const Page = () => {
      const myDialog = useDialog(MyDialog);
    

      return (
        <button onClick={() => myDialog.open()}>Open dialog</button>
      );
    }