react-confirm-box
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    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

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

    Install

    npm i react-confirm-box

    DownloadsWeekly Downloads

    93

    Version

    1.1.0

    License

    Apache-2.0

    Unpacked Size

    27.6 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar