DialogProvider

DialogProvider exposes dialog state and actions through useDialog.

Basic Usage

Live Editor

function DeleteButton() {
  const dialog = useDialog();

  const onDelete = async () => {
    const ok = await dialog.confirm({
      title: 'Delete item?',
      description: 'This action cannot be undone.'
    });
    if (ok) {
      // perform delete
    }
  };

  return <button onClick={onDelete}>Delete</button>;
}

function Example() {
  return (
    <ThemeProvider>
      <DialogProvider>
        <DeleteButton />
      </DialogProvider>
    </ThemeProvider>
  );
}

render(<Example />);

Result

Loading...