confirmer

“A lightweight, promise-based confirmation hook for React modals.”

🧩 Installation

npm install @mr.inverted/confirmer

💡 Usage

In Component

const { showConfirmer } = useConfirmer();

const result = await showConfirmer<T>(data?: unknown);
// result: T

showConfirmer();
showConfirmer(10);
showConfirmer(true);
showConfirmer("title");
showConfirmer({ title: "title" });

In Modal

const { visibility, data, resolve, reject } = useConfirmerModal<T>();
// data: T

resolve(); // default is true
resolve(10);
resolve(true);
resolve("messsage");
resolve({ input: "message" });

reject();
reject(10);
reject(false);
reject("error");
reject({ input: "error" });

🧪 Example

import { useConfirmer } from "@mr.inverted/confirmer";

function SomeComponent() {
  const { showConfirmer } = useConfirmer();

  const onButtonClick = async () => {
    try {
      const result = await showConfirmer<boolean>({ 
        icon: "warning",
        title: "Do you want to confirm?",
        message: "Please click one of the buttons"
      });

      console.log({ result });
    } catch (error) {
      console.error({ error });
    }
  }

  return (
    <button onClick={onButtonClick}>Open modal</button>
  );
}

import { useConfirmerModal } from "@mr.inverted/confirmer";

function Modal() {
  const { visibility, data, resolve, reject } = useConfirmerModal<{ 
    icon: string; 
    title: string; 
    message: string; 
  }>();

  if (!visibility) return null;

  const { icon, title, message } = data;

  return (
    <>
      {/* ... your custom modal */}

      <button onClick={() => resolve()}>Accept</button>
      <button onClick={() => reject()}>Decline</button>
    </>
  )
}

🧠 Tips

▫️If you need to create multiple modals, you can define a property in the showConfirmer function.

showConfirmer({ 
  modal: "first",
  // ...other props
});

▫️You can also create an action builder for type-safe props.

const setWarningModalProps = (title: string, description: string) => ({
  icon: "warning",
  title,
  description
  // ... other props
});
// or
const setWarningModalProps = (props: IProps) => ({
  icon: "warning",
  ...props
});


showConfirmer( setWarningModalProps("title", "descriptions") );

▫️If you don’t want the promise to be rejected, you can pass a falsy value to the resolve function.

resolve(false);
resolve({ result: false });

▫️You can also use it to display a notification modal.

const onDeleteAccountClick = async () => {
  try {
    await showConfirmer(setConfirmedModalProps({
      title: "Delete account",
      description: "After deletion, your account and all data will be permanently removed.",
      rejectButtonText: "Cancel",
      rejectButtonClass: "button-gradient",
      resolveButtonText: "Delete",
      resolveButtonClass: "button-red"
    }));

    deleteAccountApiRequest(id);

    await showConfirmer(setConfirmedModalProps({
      title: "Delete account",
      description: "Your account will be deleted within 7 days.",
      resolveButtonText: "Ok",
      resolveButtonClass: "button-gradient"
    }));
  } catch (error) {
    console.log(error);
  }
}