Introduction

React Dialog Async provides a simple hook-based API for managing dialog state in React apps. It keeps dialogs out of component rendering, and lets data easily flow in and out of dialogs.

Benefits

• ✅ CSS Framework agnostic - works with any component library or CSS setup

• ✅ Lightweight with zero dependencies

• ✅ Written in Typescript

• ✅ Supports both React and React Native

Why use React Dialog Async?

Here’s an example of how you might use it to show a confirmation dialog in response to a user action:

import { useDialog } from 'react-dialog-async';

const DeleteItemButton = () => {
  const dialog = useDialog(ConfirmationDialog);

  const handleDelete = async () => {
     const result = await dialog.open({
       message: "Are you sure you want to delete this item?"
     });

     if(result?.confirmed) {
       deleteItem();
     }
  }

  return (
    <Button onClick={handleDelete}>
      Delete item
    </Button>
  );
}

Compared to without React Dialog Async…

const DeleteItemButton = () => {

  const [isDialogOpen, setIsDialogOpen] = useState(false);

  const handleCancel = () => {
    setIsDialogOpen(false);
  }

  const handleConfirm = () => {
    setIsDialogOpen(false);
    deleteUser();
  }

  return (
    <>
      <Button onClick={() => setIsDialogOpen(true)}>
        Delete item
      </Button>
      <ConfirmationDialog
        message={"Are you sure you want to delete this item?"}
        open={isDialogOpen}
        onCancel={handleCancel}
        onConfirm={handleConfirm}
      />
    </>
  );
}

Ready to get started? Let’s jump in