react-confirm-prompt

ReactConfirmBox is a versatile and user-friendly React component designed to create confirm dialogs with ease. It is fully responsive, highly customizable, and simple to integrate into your React applications. Whether you need to confirm user actions, prompt for decisions, or display alerts, ReactConfirmBox provides a seamless solution to enhance user interactions.
Demo project

Getting started

Installation

npm i react-confirm-prompt

Basic function

This is similar to native javascript confirm alert API

import { showConfirm } from "react-confirm-prompt";
function App() {
  function handleShowConfirm() {
    showConfirm("Are you sure?").then((answer) => {
      if(answer) {
        alert("You clicked Confirm");
      } else {
        alert("You clicked Cancel");
      }
    });
  }

  return (
    <>
      <button onClick={() => handleShowConfirm()}>Show Confirm</button>
    </>
  );
}
export default App;

Function with options

function handleShowConfirm() {
    showConfirm("Are you sure?", {
      description:
        "This action cannot be undone. All values associated with this field will be lost.",
      type: "warning",
    }).then((answer) => {
      if (answer) {
        alert("You clicked yes");
      } else {
        alert("You clicked no");
      }
    });
  }

Options

option	description	type(s)
description	description for conirmation	string
type	pre-defined types of confirmation box. 'info' is the defualt value	string ("info", "warning", "success", "question")
animation	confirm box animations. 'scale' is the defualt value	string ("none", "scale", "fade", "blur", "slide-up", "slide-down", "slide-right", "slide-left")
confirmLabel	custom text that should display in confirm button	string
confirmColor	confirm button color	string (hex or rgb color codes)
confirmTextColor	confirm button text color	string (hex or rgb color codes)
cancelLabel	custom text that should display in cancel button	string
cancelColor	cancel button color	string (hex or rgb color codes)
cancelTextColor	cancel button text color	string (hex or rgb color codes)
hideCancel	hiding cancel button	boolean
disableBlur	disabling background click cancellation	boolean
color	define color for both icon & confirm button	string (hex or rgb color codes)
hoverColor	define button hover color	string (hex or rgb color codes)
hoverTextColor	define button's hover text color	string (hex or rgb color codes)
icon	define custom icon	JSX.Element
iconColor	define icon color	string (hex or rgb color codes)
hideBackground	hiding dark background	boolean
hideShadow	hiding confirm box shadow	boolean

Custom icon example

you can use react-icons for custom icons. search and import your icon to the project.

import { TiInfoOutline } from "react-icons/ti";
...
showConfirm("Are you sure?", {
      icon: <TiInfoOutline />,
      color: "rgb(96 165 250)",
    }).then((answer) => {
      if (answer) {
        alert("You clicked yes");
      } else {
        alert("You clicked no");
      }
    });