A wrapper component with a render prop for showing a confirmation message before button click

WithConfirmation.tsx

import React from "react";

// Usage:
// <WithConfirmation
//   onClick={deletePost}
//   confirmationMessage="Are you sure you want to delete this post?"
//   renderButton={({ onClick }) => {
//     return (
//       <button onClick={onClick}>
//         Delete post
//       </button>
//     );
//   }}
// />

export const WithConfirmation: React.FC<{
  renderButton: React.FC<{
    onClick: (
      event: React.MouseEvent<Element, MouseEvent> | React.FormEvent<Element>,
    ) => void;
  }>;
  onClick: React.EventHandler<React.MouseEvent | React.FormEvent>;
  confirmationMessage?: string;
}> = ({
  onClick,
  confirmationMessage = "Are you sure you want to proceed?",
  renderButton,
}) => {
  const handleClick = (
    event: React.MouseEvent<Element, MouseEvent> | React.FormEvent<Element>,
  ) => {
    const confirmed = window.confirm(confirmationMessage);

    if (confirmed) {
      onClick(event);
    }
  };

  return renderButton({ onClick: handleClick });
};