React-p-modal NPM

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

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.

@everything-registry/sub-chunk-2601

0.0.2

9 months ago

0.0.1

9 months ago