npm.io
0.18.3 • Published 3 years ago

react-popup-pro

Licence
—
Version
0.18.3
Deps
0
Size
14 kB
Vulns
0
Weekly
0
DeprecatedThis package is deprecated
SummaryDependencyVersions

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