react-p-modal

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.