# minimal-react-modal

> a minimalistic react modal component

Latest version **1.0.2** (published 2018-11-24) · MIT license · 0 weekly downloads

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

## Install

```sh
npm install minimal-react-modal
pnpm add minimal-react-modal
yarn add minimal-react-modal
bun add minimal-react-modal
```

## Health

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

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2018-11-24 |
| First published | 2018-11-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 320.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Tomoki-K |
| Maintainers | tomotetra |
| Keywords | react, modal |

## Links

- npm: https://www.npmjs.com/package/minimal-react-modal
- Repository: https://github.com/Tomoki-K/react-modal
- Homepage: https://github.com/Tomoki-K/react-modal#readme
- Issues: https://github.com/Tomoki-K/react-modal/issues
- npm.io page: https://npm.io/package/minimal-react-modal

## 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

- 1.0.2 (latest) — 2018-11-24
- 1.0.1 — 2018-11-15
- 1.0.0 — 2018-11-15

## README

# minimal-react-modal
A minimalistic react modal component.

## Installation
```bash
npm i minimal-react-modal
```

## Usage
The bare minimal usage of this library is as follows:
```jsx
import * as React from 'react';
import {ModalContainer, Modal} from 'minimal-react-modal';

React.render(
  <ModalContainer>
    {(openModal, closeModal, isActive) => (
      <div>
        <button onClick={openModal}>click me!</button>
        <Modal
          isActive={isActive}     // required
          closeModal={closeModal} // required
        >
          <h1>modal content</h1>
        </Modal>
      </div>
    )}
  </ModalContainer>
);
```
![demo_minimal](./screenshots/demo_minimal.gif)

## ModalContainer
The area where you can call the open/close functions (`openModal` / `closeModal`) and access the modal's state (`isActive`).

### Props
| propName     | type    | required | default | description                                |
|--------------|---------|----------|---------|--------------------------------------------|
| activeOnLoad | boolean | x        | false   | whether the modal should be active on load |

## Modal
The modal component itself. You must pass the close function (`closeModal`) and the modal status (`isActive`) provided by the parent `ModalContainer` component as props.

### Props
| propName         | type                | required | default | description                                                                  |
|------------------|---------------------|----------|---------|------------------------------------------------------------------------------|
| isActive         | boolean             | o        | -       | (provided by `ModalContainer`)                                               |
| closeModal       | () => void          | o        | -       | (provided by `ModalContainer`)                                               |
| className        | string              | x        | null    | classname(s) to append to the modal box                                      |
| showCloseButton  | boolean             | x        | false   | whether to show the close button on the top right corner                     |
| showAnimation    | boolean             | x        | false   | whether to animate modal opening                                             |
| modalBoxStyle    | React.CSSProperties | x        | {}      | overrides modal styles                                                       |
| closeButtonStyle | React.CSSProperties | x        | {}      | overrides default close button style (make sure `showCloseButton` is `true`) |
| overlayStyle     | React.CSSProperties | x        | {}      | overrides modal background overlay style                                     |


Here is another demo utilizing these optional props:
```jsx
<ModalContainer>
  {(openModal, closeModal, isActive) => (
    <>
      <button onClick={openModal}>click me!</button>
      <Modal
        isActive={isActive}     // required
        closeModal={closeModal} // required
        className="demo"
        showCloseButton={true}
        showAnimation={true}
        modalBoxStyle={{
          width: 500,
          height: 300,
          padding: 30,
        }}
      >
        <h1>modal content</h1>
      </Modal>
    </>
  )}
</ModalContainer>
```
![demo](./screenshots/demo_normal.gif)

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