React Confirm box

!npm !GitHub Workflow Status (branch) !NPM

A customizable and callable confirm alert react.

Demo

https://codesandbox.io/s/hardcore-hooks-lh6n0

Installation

NPM
``bash
$ npm i react-confirm-box
`
YARN
`bash
$ yarn add react-confirm-box
`
Usage

This is similar to native javascript confirm alert API

`typescript jsx
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

`typescript jsx
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

`typescript jsx
import { confirm } from "react-confirm-box";
...
const options = {
render: (message, onConfirm, onCancel) => {
return (
<>


Replace with {message}


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.

`typescript
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

`typescript jsx
const options = {
render: (message, onConfirm, onCancel) => {
return (
<>


Replace with {message}

``