react-confirm-box
v1.2.0
Published
A callable react confirm alert box
Downloads
5,248
Maintainers
Readme
React Confirm box
A customizable and callable confirm alert react.
Demo
https://codesandbox.io/s/hardcore-hooks-lh6n0
Installation
NPM
$ npm i react-confirm-box
YARN
$ yarn add react-confirm-box
Usage
This is similar to native javascript confirm alert API
import { confirm } from "react-confirm-box";
...
const onClick = async () => {
const result = await confirm("Are you sure?");
if (result) {
console.log("You click yes!");
return;
}
console.log("You click No!");
};
Replacing default button labels
import { confirm } from "react-confirm-box";
...
const options = {
labels: {
confirmable: "Confirm",
cancellable: "Cancel"
}
}
const onClick = async () => {
const result = await confirm("Are you sure?", options);
if (result) {
console.log("You click yes!");
return;
}
console.log("You click No!");
};
Use custom component
import { confirm } from "react-confirm-box";
...
const options = {
render: (message, onConfirm, onCancel) => {
return (
<>
<h1> Replace with {message} </h1>
<button onClick={onConfirm}> Yes </button>
</>
);
}
};
const onClick = async () => {
const result = await confirm("Are you sure?", options);
if (result) {
console.log("You click yes!");
return;
}
console.log("You click No!");
};
Options
labels
With this option, can replace the default button values.
labels: {
confirmable: "Confirm",
cancellable: "Cancel"
}
render
With this option, can replace the content of the confirm box. This should be a callback function which accept, messsage
as the first parameter and the second one is the function that should trigger once confirmable button clicked. Last argument is the cancellable callback
const options = {
render: (message, onConfirm, onCancel) => {
return (
<>
<h1> Replace with {message} </h1>
<button onClick={onConfirm}> Yes </button>
<button onClick={onCancel}> No </button>
</>
);
}
};