DEV Community

Akshay S
Akshay S

Posted on

3

Building a Confirmation Dialog Component with React and Material-UI

Introduction:

Confirmation Dialogs are a crucial UI component in many applications. They prompt users to confirm or cancel actions that have significant consequences. In this blog post, we will explore how to create a reusable Confirmation Dialog component using React and Material-UI. We will dive into the code and explain its functionality, as well as demonstrate how to use the component in your React applications.

Code

import { useState } from "react";
import {
  Dialog,
  Button,
  DialogTitle,
  DialogContent,
  DialogContentText,
  DialogActions,
} from "@material-ui/core";

function ConfirmationDialog(props) {
  //local states
  const [open, setOpen] = useState(false);

  const showDialog = () => {
    setOpen(true);
  };

  const hideDialog = () => {
    setOpen(false);
  };

  const confirmRequest = () => {
    props.response();
    hideDialog();
  };

  return (
    <>
      {props.children(showDialog)}
      {open && (
        <Dialog
          open={open}
          onClose={hideDialog}
          aria-labelledby="alert-dialog-title"
          aria-describedby="alert-dialog-description"
        >
          <DialogTitle id="alert-dialog-title">{props.title}</DialogTitle>
          <DialogContent>
            <DialogContentText id="alert-dialog-description">
              {props.description}
            </DialogContentText>
          </DialogContent>
          <DialogActions>
            <Button onClick={confirmRequest} color="primary">
              Yes
            </Button>
            <Button onClick={hideDialog} color="primary">
              No
            </Button>
          </DialogActions>
        </Dialog>
      )}
    </>
  );
}

export default ConfirmationDialog;

Enter fullscreen mode Exit fullscreen mode

Example usage:

import ConfirmationDialog from './ConfirmationDialog';

function MyComponent() {
  const handleConfirmation = () => {
    // Perform action upon confirmation
    console.log('Confirmed!');
  };

  return (
    <ConfirmationDialog
      title="Confirmation"
      description="Are you sure you want to proceed?"
      response={handleConfirmation}
    >
      {(showDialog) => (
        <button onClick={showDialog}>Open Confirmation Dialog</button>
      )}
    </ConfirmationDialog>
  );
}

export default MyComponent;

Enter fullscreen mode Exit fullscreen mode

In the above example, we import the ConfirmationDialog component and use it within the MyComponent component. When the user clicks the "Open Confirmation Dialog" button, the Confirmation Dialog will appear with the provided title and description. Upon confirming, the handleConfirmation function will be executed.

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more