React Popup Pro

react-popup-pro is a package that tries to simplify popup in ReactJS

Features

• Complete CSS override option.
• Multiple buttons and multiple functions as arguments for the button clicks.
• Ability to use your component in the popup
• Simplicity

Installation

react-popup-pro requires ReactJS to work

npm i react-popup-pro

Usage

Import Package

import Popup from 'react-popup-pro'

create getter and setter to use as trigger for popup

const [isPopup,setPopup]=useState(true);

Usage in jsx

<Popup isPopup={isPopup} setIsPopup={setIsPopup} message={'Add some Message'} />

Props

| Property Name | Description | | ------------- | ------------------------------ | | message | Display the message of Popup | | isPopup | To Display Popup (isPopup = true or false) | | setIsPopup | To handle closing of popup | | component | To render your own component in the Popup ( component = { < YourComponent /> } | | buttonCount | To specify the number of buttons needed in the popup. By default it will be buttonCount={1} | | buttonText | To Change text of buttons.(buttonText={'TEST'}) If you have specified multiple buttons in buttonCount. Then pass the names as array (buttonText={['TEST1','TEST2',..]}) | | buttonActions | To specify respective function calls for the button clicks. By default the renedered button will act as closePopup action. You can pass multiple functions as an array if you want multiple functions( buttonActions={[func1,func2,...]} ) | | overrideOuterContainerClassName | To override Popup outer container's class so that you can write your own css | | overrideInnerContainerClassName | To override Popup Inner container's class so that you can write your own css | | overrideMessageContainerClassName | To override Message container's class so that you can write your own css | | overrideButtonContainerClassName | To override Buttons container's class so that you can write your own css | | overrideButtonClassName | To override button class so that you can write your own css |

License

MIT