Skip to main content

AutoOpenConfirmation

This code defines a React functional component called AutoOpenConfirmation, which displays a confirmation modal. The modal is used to prompt the user to confirm or cancel an action.

Key Features​

1. Component Props​

The AutoOpenConfirmation component accepts the following props:

Props Breakdown
  • initialShouldOpen: A boolean that determines if the modal should open automatically when the component is mounted.
  • title: A string representing the title of the modal.
  • message: A string that will be displayed in the body of the modal.

2. State Management​

The component uses React’s useState hook to manage the state of whether the modal is open or not.

State Initialization
  • isOpen: A boolean state, initialized as false, to track whether the modal is open.

3. Lifecycle Effect​

The useEffect hook listens for changes in initialShouldOpen. If it's true, the modal will automatically open when the component is first rendered.

useEffect Logic
useEffect(() => {
  if (initialShouldOpen) {
    setIsOpen(true)
  }
}, [initialShouldOpen])

This effect ensures that the modal opens based on the initial prop passed into the component.

4. Event Handlers​

The component provides two event handlers for user interactions:

:::alert handleConfirm

  • Logs "User confirmed" to the console.
  • Closes the modal by setting isOpen to false.
const handleConfirm = () => {
  console.log("User confirmed");
  setIsOpen(false);
}
handleCancel
  • Logs "User cancelled" to the console.
  • Redirects the user to the homepage (/) using Next.js's router.push('/').
  • Closes the modal.
const handleCancel = () => {
  console.log("User cancelled");
  router.push('/');
  setIsOpen(false);
}

5. Conditional Rendering​

The modal is only rendered when isOpen is true. If isOpen is false, the component returns null, and the modal will not be displayed.

Conditional Rendering Logic
if (!isOpen) return null;

This ensures the modal is not unnecessarily rendered when it's closed.

6. Modal UI​

The modal has the following UI components:

  • Card: Used to create the modal structure.
  • CardHeader: Contains the modal title.
  • CardContent: Displays the message.
  • CardFooter: Includes two buttons (Yes and No) for confirming or canceling the action.

The modal is styled with Tailwind CSS utility classes.

Styling Details

The modal has a fixed position, a semi-transparent black background, and centers itself within the screen:

<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">

This ensures the modal appears on top of other content and takes up the entire viewport.

Example Workflow​

1. Initial State​

  • The modal starts closed (isOpen = false).
  • If initialShouldOpen = true, the modal opens automatically.

2. User Interaction​

  • Confirm:
    • Logs "User confirmed".
    • Closes the modal (setIsOpen(false)).
  • Cancel:
    • Logs "User cancelled".
    • Redirects to the homepage (/).
    • Closes the modal.

3. Conditional Rendering​

If isOpen becomes false, the modal disappears.

Summary​

The AutoOpenConfirmation component is a customizable confirmation modal for React applications. It allows automatic opening based on props, provides user actions for confirmation or cancellation, and can redirect users if necessary. This component is useful for cases where you need to confirm user actions, such as deletion or navigation.

Usage Example
<AutoOpenConfirmation 
  initialShouldOpen={true} 
  title="Are you sure?" 
  message="Do you want to continue with this action?" 
/>

This will render the modal with the title "Are you sure?" and the message "Do you want to continue with this action?" when the component is rendered.