# @aneves/react-modal

> Modal React Component

Latest version **0.1.16** (published 2016-11-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install @aneves/react-modal
pnpm add @aneves/react-modal
yarn add @aneves/react-modal
bun add @aneves/react-modal
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.16 |
| Published | 2016-11-10 |
| First published | 2016-03-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Alexandre Neves |
| Maintainers | aneves |
| Keywords | react-modal, react-dialog, react, modal, dialog |

## Links

- npm: https://www.npmjs.com/package/@aneves/react-modal
- Repository: https://github.com/alexandreneves/react-modal
- Issues: https://github.com/alexandreneves/react-modal/issues
- npm.io page: https://npm.io/package/@aneves/react-modal

## Dependencies (1)

- [@aneves/js-closest](https://npm.io/package/@aneves/js-closest.md) ^0.1.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.16 (latest) — 2016-11-10
- 0.1.15 — 2016-11-09
- 0.1.14 — 2016-11-08
- 0.1.13 — 2016-10-06
- 0.1.12 — 2016-07-26
- 0.1.11 — 2016-06-27
- 0.1.10 — 2016-06-27
- 0.1.9 — 2016-06-27
- 0.1.8 — 2016-06-27
- 0.1.7 — 2016-06-24
- 0.1.6 — 2016-06-17
- 0.1.5 — 2016-06-09
- 0.1.4 — 2016-06-09
- 0.1.3 — 2016-06-06
- 0.1.2 — 2016-06-06
- … 3 more at https://npm.io/package/@aneves/react-modal/versions

## README

# REACT MODAL

MODAL React Component

+ easy to use
+ responsive



## TABLE OF CONTENTS

+ [example](#example)
+ [installation](#installation)
+ [how it works](#how-it-works)
+ [usage](#usage)



## EXAMPLE

[Example (redux)](https://alexandreneves.github.io/react-modal), if requested I can provide an Alt example.



## INSTALLATION

```sh
$ npm install --save @aneves/react-modal
```



## HOW IT WORKS

react-modal was developed alongside react-flyout so it shares most of its structure

+ **Modal**
    + stateless component
    + handles everything related to how the modal looks and behaves when opened
+ **ModalWrapper**
    + stateless component
    + renders the Modal when prop.open === true
    + executes prop.onWindowClick when a window click event gets fired
+ **modal.css**
    + CSS

The problem with these kind of componentes (dropdowns, modals, ...) is the need to handle window/body clicks in order to close. Why is this a problem? The lack of state and the immutability of the props make it "impossible" to close itself.

That's why I provide the **ModalWrapper** which adds and removes the window click eventListener when needed and accepts a method through the props that gets executed by the handler. This method can in turn close the flyout by updating the props sent to the wrapper.

Keep in mind that the **ModalWrapper** is optional, you can import the **Modal** directly and deal with its renderization by yourself.



## USAGE

The usage will depend on your projects architecture but will be something along these lines:

```html
<button onClick={e => {dispatch(modalToggle('modal-foobar'))}}>ModalToggle</button>
<Modal id="modal-foobar" title="foobar">
    <div>(...)</div>
</Modal>
```

### Props

+ **id**: (string, required) modal id
+ **open**: (bool) opens the modal if true
+ **title**: (string) sets a title
+ **onModalClose**: (func) called only when the modal is closed by typing ESC, clicking 'X', or clicking the backdrop
+ **onModalUnmount**: (func) called on componentWillUnmount

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