# @alexseitsinger/simple-modal

> A simple modal

Latest version **0.2.16** (published 2019-04-17) · BSD-2-Clause license · 0 weekly downloads

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

## Install

```sh
npm install @alexseitsinger/simple-modal
pnpm add @alexseitsinger/simple-modal
yarn add @alexseitsinger/simple-modal
bun add @alexseitsinger/simple-modal
```

## Health

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

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.2.16 |
| Published | 2019-04-17 |
| First published | 2018-09-19 |
| Weekly downloads | 0 |
| License | BSD-2-Clause |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 170.7 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Alex Seitsinger |
| Maintainers | alexseitsinger |
| Keywords | react, modal |

## Links

- npm: https://www.npmjs.com/package/@alexseitsinger/simple-modal
- Repository: https://github.com/alexseitsinger/simple-modal
- Homepage: https://github.com/alexseitsinger/simple-modal#readme
- npm.io page: https://npm.io/package/@alexseitsinger/simple-modal

## Dependencies (6)

- [core-js](https://npm.io/package/core-js.md) 3
- [debounce](https://npm.io/package/debounce.md) 1.2.0
- [prop-types](https://npm.io/package/prop-types.md) 15.7.2
- [@emotion/core](https://npm.io/package/@emotion/core.md) 10.0.10
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) 7.4.3
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) 10.0.10

## 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.2.16 (latest) — 2019-04-17
- 0.2.15 — 2019-04-07
- 0.2.4 — 2019-03-31
- 0.2.2 — 2019-01-06
- 0.2.1 — 2018-12-30
- 0.2.0 — 2018-12-18
- 0.1.11 — 2018-11-01
- 0.1.10 — 2018-10-25
- 0.1.9 — 2018-10-18
- 0.1.7 — 2018-10-18
- 0.1.6 — 2018-10-18
- 0.1.5 — 2018-10-16
- 0.1.4 — 2018-09-24
- 0.1.3 — 2018-09-24
- 0.1.2 — 2018-09-19
- … 2 more at https://npm.io/package/@alexseitsinger/simple-modal/versions

## README

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

## SimpleModal

A modal that can be used with react redux.

### Parameters

-   `props` **[object][1]** 
    -   `props.children` **([Node][2] \| [Array][3])** The child elements to render.
    -   `props.backgroundShade` **[String][4]** The background shade to use. (optional, default `dark`)
    -   `props.closeButtonVisible` **[Boolean][5]** Determine if the close button is visible. (optional, default `true`)
    -   `props.closeButtonStyle` **[Object][1]** Extra style to apply to the close button. (optional, default `{}`)
    -   `props.closeButtonPosition` **[String][4]** The position of the close button. (optional, default `foreground`)
    -   `props.closeButtonBody` **([Node][2] \| [Array][3])** The body of the close button. (optional, default `close`)
    -   `props.onClose` **[Function][6]** The function to invoke when the modal closes.
    -   `props.onOpen` **[Function][6]** The function to invoke when the modal opens. (optional, default `()=>{}`)
    -   `props.isVisible` **[Boolean][5]** Determines if the modal is rendered into the DOM.
    -   `props.onEscapeKey` **[Function][6]** The function to invoke when then esacpe key is pressed. (optional, default `()=>{}`)
    -   `props.onClickBackground` **[Function][6]** The function to invoke when the background of the modal is clicked. (optional, default `()=>{}`)
    -   `props.containerClassName` **[String][4]** The classname to use for the modal container element. (optional, default `SimpleModal`)
    -   `props.layerPosition` **[String][4]** The layer position to use for the zIndex. (optional, default `above`)
    -   `props.defaultIndex` **[Number][7]** The default zIndex to start from. (optional, default `100`)
    -   `props.mainElementSelector` **[String][4]** The selector to use to find the main element in the DOM. (optional, default `main`)
    -   `props.mountPointSelector` **[String][4]** The selector to use to find the mount point element in the DOM> (optional, default `body`)

### Examples

```javascript
<SimpleModal
  isVisible={true}
  closeButtonPosition={"window"}
  onClose={() => {
    doClose()
  }}
  onEscapeKey={() => {
    doClose()
  }}>
  <div>An example modal body</div>
</SimpleModal>
```

[1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object

[2]: https://developer.mozilla.org/docs/Web/API/Node/nextSibling

[3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array

[4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String

[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean

[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function

[7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number

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