# react-popup-ts

> Made with create-react-library

Latest version **1.1.0** (published 2022-03-18) · MIT license · 0 weekly downloads

## Install

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

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2022-03-18 |
| First published | 2022-03-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 1 |
| Unpacked size | 43.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | vandat9xhn |
| Maintainers | vandat9xhn |

## Links

- npm: https://www.npmjs.com/package/react-popup-ts
- Repository: https://github.com/vandat9xhn/react-popup-ts
- Homepage: https://github.com/vandat9xhn/react-popup-ts#readme
- Issues: https://github.com/vandat9xhn/react-popup-ts/issues
- npm.io page: https://npm.io/package/react-popup-ts

## Dependencies (1)

- [react-commons-ts](https://npm.io/package/react-commons-ts.md) ^1.3.0

## Recent versions

- 1.1.0 (latest) — 2022-03-18
- 1.0.0 — 2022-03-16

## README

# react-popup-ts

> Made with create-react-library

[![NPM](https://img.shields.io/npm/v/react-popup-ts.svg)](https://www.npmjs.com/package/react-popup-ts) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save react-popup-ts
```

## Usage

```tsx
import React, { useState } from 'react';

import { Popup, PopupMulti, usePopupMulti } from 'react-popup-ts';
import 'react-popup-ts/dist/index.css';

//
const App = () => {
    //
    const [is_show, setIsShow] = useState(false);

    //
    const { popup_arr, addPopup, removePopup } = usePopupMulti({});

    // -----

    //
    function toggleShow() {
        setIsShow((is_show) => !is_show);
    }

    //
    function onAddPopup() {
        addPopup({
            is_show: true,
            children: (
                <div
                    style={{
                        width: 'fit-content',
                        padding: '6px 12px',
                        borderRadius: '10px',
                        backgroundColor: 'rgba(0,0,0,0.8)',
                        color: 'white'
                    }}
                >
                    This is Popup {Math.floor(Math.random() * 1000)}
                </div>
            )
        });
    }

    //
    return (
        <div>
            <div onClick={toggleShow}>Toggle</div>
            <div onClick={onAddPopup}>Add Popup</div>

            <div style={{ position: 'fixed', left: 0, top: 100 }}>
                <Popup
                    is_show={is_show}
                    handleAfterEndTimeExist={toggleShow}
                    time_exist={0}
                >
                    <div
                        style={{
                            width: 'fit-content',
                            padding: '6px 12px',
                            borderRadius: '10px',
                            backgroundColor: 'rgba(0,0,0,0.8)',
                            color: 'white'
                        }}
                    >
                        This is Popup
                    </div>
                </Popup>
            </div>

            <div style={{ position: 'fixed', left: 0, top: 200 }}>
                <PopupMulti
                    popup_arr={popup_arr.current}
                    removePopup={removePopup}
                />
            </div>
        </div>
    );
};

export default App;

```

## License

MIT © [vandat9xhn](https://github.com/vandat9xhn)

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