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.