React Dialog Async


Provides a way to show a dialog using hooks.


  • Headless – works with any styling approach and any dialog component
  • No direct dependencies

Quick start

To use react-dialog-async install it via npm or yarn

# With npm
> npm i react-dialog-async

# With yarn
> yarn add react-dialog-async

then wrap your application in the DialogProvider component:

// src/index.js
import { DialogProvider } from "react-dialog-async";

      <App />

Next define a dialog component:

// src/components/MyDialog.jsx

export default MyDialog = ({ open, handleClose }) => {
  <Dialog open={open} onClose={() => handleClose(false)}>
    <p>This is a dialog</p>

lastly use the useDialog hook to show the dialog:

// src/App.jsx
import { useDialog } from "react-dialog-async";
import MyDialog from "components/MyDialog";

const App = () => {
  const myDialog = useDialog(MyDialog);

  const handleClick = async () => {

  return (
      <button onClick={handleClick}>
        Open Dialog

For a fully working example see the examples section below


For examples of usage with different UI frameworks such as Material UI & Bootstrap, see the examples folder.

Usage with Typescript

To define a dialog component with typescript use the AsyncDialogProps type. It is a generic type that accepts 2 parameters, the first specifies the type of the data passed to the data prop and the second specifies the type of the data returned by the dialog via the handleClose function.

The below example demonstrates a simple dialog that gets the user to enter their name with a custom prompt

import { AsyncDialogProps } from "react-dialog-async";

const InputDialog: React.FC<
  AsyncDialogProps<string, string>
> = ({ open, handleClose, data }) => {

  const [value, setValue] = useState("");

  return (
    <Dialog open={open} onClose={() => handleClose()}>
        <DialogContentText id="alert-dialog-description">
        <Input value={value} onChange={e => setValue(}>
        <Button onClick={() => handleClose(value)} autoFocus>


MIT Licensed. Copyright (c) Alexander Nicholson 2021.


View Github