# react-popup-pro

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

Latest version **0.18.3** (published 2022-12-21) · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install react-popup-pro
pnpm add react-popup-pro
yarn add react-popup-pro
bun add react-popup-pro
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.18.3 |
| Published | 2022-12-21 |
| First published | 2022-12-20 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 14 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | aadilshaik |

## Links

- npm: https://www.npmjs.com/package/react-popup-pro
- npm.io page: https://npm.io/package/react-popup-pro

## Recent versions

- 0.18.3 (latest) — 2022-12-21
- 0.18.2 — 2022-12-21
- 0.12.1 — 2022-12-21
- 0.12.0 — 2022-12-21
- 0.7.0 — 2022-12-21
- 0.6.0 — 2022-12-21
- 0.5.0 — 2022-12-21
- 0.3.0 — 2022-12-21
- 0.0.1 — 2022-12-20

## README

# 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

---
_Source: https://npm.io/package/react-popup-pro · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._