JIYIK CN >

While developing web applications, sometimes we have to prompt the user with a confirmation dialog before performing an action (such as deleting a user).

Creating multiple dialogs is inefficient, and it's hard to maintain a bunch of duplicate logic across components. Let's create our own useConfirmHook from scratch.

Simple version - with "window.confirm()"

If you have no UI requirements for the appearance of the dialog component, you can confirm()easily create it using JavaScript's built-in function.

function useConfirm(message, onConfirm, onAbort) {
  const confirm = () => {
    if(window.confirm(message))
      onConfirm();
    else
      onAbort();
  }
  return confirm
}
function App() {
  const handleDelete = () => {/* ... */};
  const handleAbort = () => {/* ... */};
  const confirmDelete = useConfirm(
    'Sure?',
    handleDelete,
    handleAbort,
  );
  return <button onClick={confirmDelete}>Delete User</button>
}

Even though it's not a hook at all (it doesn't use any React hooks like useState), it should work fine in normal situations.

window.confirm() will block the browser's thread and freeze UI updates.

Advanced version — with Promise

In most cases, we use UI libraries such as Material-UI in our projects to implement better user interfaces. Custom hooks with JavaScript’s Promise API help us separate the logic of the component from the confirmation dialog.

import {
  Button, Dialog, DialogActions,
  DialogContent, DialogContentText, DialogTitle,
} from '@mui/material';
import { useState } from 'react';
const useConfirm = (title, message) => {
  const [promise, setPromise] = useState(null);

  const confirm = () => new Promise((resolve, reject) => {
    setPromise({ resolve });
  });

  const handleClose = () => {
    setPromise(null);
  };

  const handleConfirm = () => {
    promise?.resolve(true);
    handleClose();
  };

  const handleCancel = () => {
    promise?.resolve(false);
    handleClose();
  };
  // You could replace the Dialog with your library's version
  const ConfirmationDialog = () => (
    <Dialog
      open={promise !== null}
      fullWidth
    >
      <DialogTitle>{title}</DialogTitle>
      <DialogContent>
        <DialogContentText>{message}</DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button onClick={handleConfirm}>Yes</Button>
        <Button onClick={handleCancel}>Cancel</Button>
      </DialogActions>
    </Dialog>
  );
  return [ConfirmationDialog, confirm];
};

export default useConfirm;

In the code above, we declared a function confirm() and a dialog component (Material-UI) in the useConfirm hook and returned them as an array. We can use the hook like this:

function App() {
  const [Dialog, confirmDelete] = useConfirm(
    'Are you sure?',
    'Are you sure you want to delete user "Isaac Kwok"?',
  )
  const handleDelete = async () => {
    const ans = await confirmDelete()
    if (ans) {/* ... */}
    else {/* ... */}
  }
  return (
    <>
      <button onClick={handleDelete}>Delete</button>
      <Dialog />
    </>
  )
}

We can use Promise.reject() to do this when the user clicks Cancel, or

Components are promoted to the App level and controlled using React Context.

 

React hooks are awesome, it helps to organize your code and extract shared logic between components, useConfirm is worth a try, you may find it useful.