react-confirm-box v1.2.0

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>
        </>
      );
    }
  };