ts-confirmation-modal

Package to provide a reusable React component designed to display a confirmation dialog box with customizable message and button options.

Installation

ts-confirmation-modal

ts-modal-wrapper-component is available as an npm package.

npm:

npm i ts-confirmation-modal

yarn:

yarn add ts-confirmation-modal

Getting started with ts-confirmation-modal

Example

import React, { useState } from "react";
import ConfirmationModal from "ts-confirmation-modal/dist/ConfirmationModal";
import "./App.css";

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleOpenModal = () => {
    setIsModalOpen(true);
  };

  const handleCloseModal = () => {
    setIsModalOpen(false);
  };

  const handleConfirm = () => {
    console.log("Confirmed");
    handleCloseModal();
  };

  return (
    <div className="App">
      <header>
        <h1>Welcome to the React Confirmation Modal Demo</h1>
        <p>Click the button below to open the modal and interact with it.</p>
      </header>

      <button className="custom-button" onClick={handleOpenModal}>
        Open Confirmation Modal
      </button>
      <ConfirmationModal
        open={isModalOpen}
        onClose={handleCloseModal}
        onSubmit={handleConfirm}
        message="Are you sure you want to proceed?"
        buttonName="Confirm"
      />
    </div>
  );
}

export default App;

Props

Name	Type	Default	Required	Description
open	boolean	false	yes	Controls whether the modal is open or closed.
onClose	function		Yes	Callback function to handle modal close event.
message	string		Yes	The message to be displayed in the confirmation dialog.
buttonName	string		No	The text to display on the confirmation button.
onSubmit	function		Yes	Callback function to handle the action when the user confirms.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.