How To Make Confirmation Modal/Prompt with React
Published: 2023-05-28 13:07:08

✨ [**Watch on YouTube**](https://youtu.be/S_i04MKYfxk)  |  🐙 [GitHub](https://github.com/RodionChachura/reactkit)  |  🎮 [Demo](https://reactkit.radzion.com/confirmation-modal)

Including a confirmation prompt when users engage in potentially destructive actions is a widely accepted practice. For example, Increaser effectively employs a modal to present a confirmation prompt when users wish to permanently delete a project. As such scenarios can arise in various projects, I'd like to share an abstraction I use to seamlessly incorporate such prompts.

![](./example.png)

Here's the code from Increaser for delete project functionality that leverages two abstract components - `Opener` and `ConfirmationModal`.

```tsx
<Opener
  renderOpener={({ onOpen }) => (
    <IconButton kind="alert" icon={<TrashBinIcon />} onClick={onOpen} />
  )}
  renderContent={({ onClose }) => (
    <ConfirmationModal
      title="Delete project"
      onClose={onClose}
      confirmActionText="Delete"
      onConfirm={() => {
        console.log("Delete project")
      }}
      renderContent={() => (
        <VStack gap={12}>
          <Text color="supporting">
            Are you sure you want to delete{" "}
            <Text as="span" color="regular">
              Job?
            </Text>{" "}
            This action will remove all the analytics related to the project.
          </Text>
          <Text color="supporting">
            To keep the data but hide the project from other parts of the app -{" "}
            <ShyTextButton
              onClick={() => {
                console.log("Make project inactive")
                onClose()
              }}
              text="make it inactive."'
            />
          </Text>
        </VStack>
      )}
    />
  )}
/>
```

The first component is a simple wrapper for a boolean state for an open/closed state, so it doesn't do much and is more of a personal preference.

```tsx
import { ReactNode } from "react"
import { useBoolean } from "lib/shared/hooks/useBoolean"
import { ClosableComponentProps } from "lib/shared/props"

interface RenderOpenerParams {
  onOpen: () => void
}

interface Props {
  renderOpener: (params: RenderOpenerParams) => ReactNode
  renderContent: (params: ClosableComponentProps) => ReactNode
}

export const Opener = ({ renderOpener, renderContent }: Props) => {
  const [isOpen, { set: onOpen, unset: onClose }] = useBoolean(false)

  return (
    <>
      {isOpen && renderContent({ onClose })}
      {renderOpener({ onOpen })}
    </>
  )
}
```

The second component utilizes the `Modal` component, which I've explained in a separate [post](/blog/modal). We base `ConfirmationModalProps` of `ModalProps` while making onClose a required prop and removing the footer, as we want to use it for two choices, cancel or confirm. To make both buttons equal in size, I leverage the `SameWidthChildrenRow`, which you can learn more about [here](/blog/same-width).

```tsx
import { Modal, ModalProps } from "."
import { SameWidthChildrenRow } from "../Layout/SameWidthChildrenRow"
import { PrimaryButton, PrimaryButtonKind } from "../buttons/rect/PrimaryButton"

interface ConfirmationModalProps
  extends Omit<ModalProps, "footer" | "onClose"> {
  onClose: () => void
  onConfirm: () => void
  confirmActionText: string
  confirmActionKind?: PrimaryButtonKind
}

export const ConfirmationModal = ({
  onClose,
  onConfirm,
  confirmActionText,
  confirmActionKind = "alert",
  ...props
}: ConfirmationModalProps) => {
  return (
    <Modal
      {...props}
      onClose={onClose}
      footer={
        <SameWidthChildrenRow gap={20}>
          <PrimaryButton size="l" onClick={onClose} kind="secondary">
            Cancel
          </PrimaryButton>
          <PrimaryButton
            size="l"
            onClick={() => {
              onConfirm()
              onClose()
            }}
            kind={confirmActionKind}
          >
            {confirmActionText}
          </PrimaryButton>
        </SameWidthChildrenRow>
      }
    />
  )
}
```