react-confirm-prompt

React Confirm Prompt

ReactConfirmPrompt 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. v1.1.1 of React Confirm Promt is now released!

Installation

1npm i react-confirm-prompt

Usage

1import { showConfirm } from "react-confirm-prompt";
2
3function App() {
4  function handleShowConfirm() {
5//showConfirm function
6    showConfirm("Are you sure?").then((answer) => {
7      if(answer) {
8        alert("You clicked Confirm");
9      } else {
10        alert("You clicked Cancel");
11      }
12    });
13
14  }
15  return (
16    <>
17      <button onClick={() => handleShowConfirm()}>Show Confirm</button>
18    </>
19  );
20}
21export default App;

The Playground

Explore the React Confirm Promt Playground! Easily customize your confirm dialogs and get the code snippets you need using our intuitive UI. Experiment with different options and see the results in real-time.

Title

Description

Type

Animation

Hide cancel button

Disable background cancellation

Hide the dark background

Hide the shadow

Theme Color

Hover Color

Hover Text Color

Icon Color

Confirm button

Lable text

Text Color

Button Color

Cancel button

Lable text

Text Color

Button Color

1showConfirm("Are you sure?",
2	{
3		description : "This action cannot be undone. All values associated with this field will be lost.",
4	}
5);

Adding Custom Icons

You can easily customize your confirm dialogs by adding custom icons.

First, visit the react-icons official website to install react-icons in your project. Once installed, import the specific icon you want to use.

Next, you can add the custom icon to your confirm box by passing it as a React Element to the icon parameter.

1import { AiFillHeart } from "react-icons/ai";
2import { showConfirm } from "react-confirm-prompt";
3
4showConfirm("Are you sure?", { icon: <AiFillHeart /> });

Options

You can customize the confirm box with the following options,

Option	Description	type(s)
description	description for conirmation box	string
type	pre-defined types(themes) 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