react-p-modal

A lightweight and customizable React popup component with a confirm button.

Installation

You can install react-p-modal using npm or yarn:

npm install react-p-modal --save

Or

yarn add react-p-modal

Usage

Import the module into your project like this :

import React, { useState } from "react";
import Popup from "react-p-modal";

const App = () => {
  const [showPopup, setShowPopup] = useState(false);

  const handleClose = () => {
    setShowPopup(false);
    // Additional close functionality if needed
  };

  const handleConfirm = () => {
    // Handle confirm action
    setShowPopup(false);
  };

  return (
    <div>
      {/* Your other components */}
      <button onClick={() => setShowPopup(true)}>Open Popup</button>
      <Popup
        open={showPopup}
        onClose={handleClose}
        onConfirm={handleConfirm}
        title="Thanks for your review"
        description="I always felt like I could do anything. That’s the main thing people are controlled by! Thoughts- their perception of themselves! They're slowed down by their perception of themselves..."
        confirmButton="Confirm"
        closeButton="Close"
      />
    </div>
  );
};

export default App;

Props

| Prop | Type | Required | Default | Description | | --------------- | -------- | -------- | ------------------------ | ------------------------------------------------------------------------------------------------------ | | open | boolean | Yes | - | Controls whether the popup is open or closed. | | onClose | function | Yes | - | Callback function when the close button is clicked or when the backdrop is clicked to close the popup. | | onConfirm | function | Yes | - | Callback function when the confirm button is clicked. | | title | string | No | "Thanks for your review" | The title of the popup. | | description | string | No | - | The description/content of the popup. | | confirmButton | string | No | "Confirm" | The text to display on the confirm button. | | closeButton | string | No | "Close" | The text to display on the close button. | | addConfirm | boolean | No | true | Controls whether to display the Confirm button. | | addCancel | boolean | No | true | Controls whether to display the Cancel button. |

These props allow users to customize the behavior and content of the Popup component according to their requirements. Make sure to provide the appropriate data types and default values when using the component.