# rpic-modal

> Just a simple modal

Latest version **2.0.11** (published 2023-01-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install rpic-modal
pnpm add rpic-modal
yarn add rpic-modal
bun add rpic-modal
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.11 |
| Published | 2023-01-04 |
| First published | 2022-12-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 2 |
| Unpacked size | 122.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | rpiccolo |
| Maintainers | kronox |
| Keywords | rpic, modal |

## Links

- npm: https://www.npmjs.com/package/rpic-modal
- Homepage: https://gitlab.com/da_frontend/p14_rpic-modal/-/blob/master/README.md
- Issues: https://gitlab.com/da_frontend/p14_rpic-modal/-/issues
- npm.io page: https://npm.io/package/rpic-modal

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 2.0.11 (latest) — 2023-01-04
- 2.0.10 — 2023-01-04
- 2.0.9 — 2022-12-29
- 2.0.8 — 2022-12-28
- 2.0.7 — 2022-12-28
- 2.0.6 — 2022-12-28
- 2.0.5 — 2022-12-20
- 2.0.4 — 2022-12-20
- 2.0.3 — 2022-12-20
- 2.0.2 — 2022-12-20
- 2.0.1 — 2022-12-20
- 2.0.0 — 2022-12-20
- 1.0.0 — 2022-12-19

## README

# rpic-modal

## What is it?

This is just a react modal customizable by props

## Install

```bash
npm i rpic-modal
```

## Usage

After installing the package, go to the parent component of your modal and import useState

```jsx
import { useState } from 'react';
```

Then use a state to show / hide you modal, some App code exemple:

```jsx
import { useState } from 'react';
import RpicModal from './components/RpicModal';

function App() {
    const [showModal, setShowModal] = useState(false);

    return (
        <div className="App">
            <div onClick={() => setShowModal(!showModal)}>Show the modal</div>
            {showModal && (
                <RpicModal
                    content="Customizable content"
                    closeModal={() => setShowModal(!showModal)}
                />
            )}
        </div>
    );
}
```

## Props

| PropName        |   Type   |                       Exemple |
| --------------- | :------: | ----------------------------: |
| content         |  string  |   'This is a content exemple' |
| width           |  string  |                        '50px' |
| height          |  string  |                         '50%' |
| backgroundColor |  string  |                         'red' |
| border          |  string  |             '2px solid black' |
| borderRadius    |  string  |                        '10px' |
| justifyContent  |  string  |       'start', 'end', center' |
| alignItems      |  string  |       'start', 'end', center' |
| iconSize        |  string  |                        '30px' |
| closeModal      | function | () => { console.log('close')} |

## License

MIT

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