Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@sooni-hooks/use-confirm

soonitoon1MIT1.0.2

React Hook to use confirm easy way

React, Hook, Confirm, useConfirm

readme

useConfirm

JavaScript function that can sand browser confirm to the user.

Notice

useConfirm is in the repository "React_Hooks", but it is not React Hook!🙃 So it doesn't have any dependency modules.

Installation

  1. $ npm install @sooni-hooks/use-confirm
  2. Add import useConfirm from "@sooni-hooks/use-confirm" in your script.
  3. Done!

How to use

useConfirm has three properties.

  • onConfirm : Callback function that is called when confirm event is happened.
  • onCancel : Callback function that is called when confirm is rejected by user.
  • message : The String that you want to show on browser confirm window.

useConfirm returns handleConfirm(). It contains two functions and message that you gave to useConfirm as a property. It makes confirm event and runs event handler automatically when you call it.

Example

function App() {
  const onConfirm = () => console.log("OK");
  const onCancel = () => console.log("Nope");
  const handleConfirm = useConfrim(onConfirm, onCancel, "Sure?");
  return (
    <div classname="App">
      <button onClick={handleConfirm}>click</button>
    </div>
  );
}

Development environment setting

You need to install NPM

Full code

const useConfirm = (onConfirm, onCancel, message = "Are you sure?") => {
  if (typeof onConfirm !== "function") {
    return;
  }
  if (typeof onCancel !== "function") {
    return;
  }
  const handleConfirm = () => {
    if (confirm(message)) {
      onConfirm();
    } else {
      onCancel();
    }
  };
  return handleConfirm;
};

export default useConfirm;