# @trendmicro/react-modal

> React Modal component

Latest version **3.1.0** (published 2019-12-13) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.1.0 |
| Published | 2019-12-13 |
| First published | 2016-12-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 120 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 19 |
| Author | Cheton Wu |
| Maintainers | cheton, rothpeng, trendmicro-frontend, xjkit |
| Keywords | react-modal, react, modal, portal |

## Links

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

## Dependencies (3)

- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0
- [@trendmicro/react-portal](https://npm.io/package/@trendmicro/react-portal.md) ^1.0.1

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

- 3.1.0 (latest) — 2019-12-13
- 3.0.0 — 2019-01-01
- 2.3.0 — 2018-12-27
- 2.2.2 — 2018-08-07
- 2.2.1 — 2018-08-01
- 2.2.0 — 2018-08-01
- 2.1.2 — 2018-07-05
- 2.1.1 — 2018-06-01
- 2.1.0 — 2018-03-27
- 2.0.5 — 2018-03-22
- 2.0.4 — 2018-03-15
- 2.0.3 — 2018-03-08
- 2.0.2 — 2018-01-26
- 2.0.1 — 2018-01-23
- 2.0.0 — 2018-01-14
- … 24 more at https://npm.io/package/@trendmicro/react-modal/versions

## README

# react-modal [![build status](https://travis-ci.org/trendmicro-frontend/react-modal.svg?branch=master)](https://travis-ci.org/trendmicro-frontend/react-modal) [![Coverage Status](https://coveralls.io/repos/github/trendmicro-frontend/react-modal/badge.svg?branch=master)](https://coveralls.io/github/trendmicro-frontend/react-modal?branch=master)

[![NPM](https://nodei.co/npm/@trendmicro/react-modal.png?downloads=true&stars=true)](https://nodei.co/npm/@trendmicro/react-modal/)

React Modal

Demo: https://trendmicro-frontend.github.io/react-modal

## Installation

1. Install the latest version of [react](https://github.com/facebook/react) and [react-modal](https://github.com/trendmicro-frontend/react-modal):

  ```
  npm install --save react @trendmicro/react-modal
  ```

2. At this point you can import `@trendmicro/react-modal` and its styles in your application as follows:

  ```js
  import Modal from '@trendmicro/react-modal';

  // Be sure to include styles at some point, probably during your bootstraping
  import '@trendmicro/react-modal/dist/react-modal.css';
  ```
  
## Recommended Setup

Create a common components directory including both `Buttons` and `Modal` components, as shown below:
```
components/
  Buttons/
    index.js
  Modal/
    index.js
```

**components/Buttons/index.js**
```js
import '@trendmicro/react-buttons/dist/react-buttons.css';

export { Button, ButtonGroup, ButtonToolbar } from '@trendmicro/react-buttons';
```

**components/Modal/index.js**
```js
import '@trendmicro/react-modal/dist/react-modal.css';
import Modal from '@trendmicro/react-modal';

export default Modal;
```

Then, import `Modal` component in your code:
```js
import Modal from './components/Modal';
```

## Usage

```js
import React from 'react';
import { Button } from './components/Buttons';
import Modal from './components/Modal';

export default ({ size = 'sm', closeModal, ...props }) => (
    <Modal {...props} size={size} onClose={closeModal}>
        <Modal.Header>
            <Modal.Title>
                Modal Title
            </Modal.Title>
        </Modal.Header>
        <Modal.Body padding>
            Modal Body
        </Modal.Body>
        <Modal.Footer>
            <Button
                btnStyle="primary"
                onClick={closeModal}
            >
                Save
            </Button>
            <Button
                btnStyle="default"
                onClick={closeModal}
            >
                Close
            </Button>
        </Modal.Footer>
    </Modal>
);
```

## Examples

### Prevent Body From Scrolling

You can create a ModalWrapper component that changes the body style on open and close.

```js
import React, { PureComponent } from 'react';
import Modal from './components/Modal';

let bodyStyle = null;

class ModalWrapper extends PureComponent {
    static propTypes = {
        ...Modal.propTypes
    };

    static defaultProps = {
        ...Modal.defaultProps
    };

    componentWillReceiveProps(nextProps) {
        if (nextProps.show !== this.props.show) {
            if (nextProps.show) {
                this.changeBodyStyle();
            } else {
                this.restoreBodyStyle();
            }
        }
    }

    componentDidMount() {
        this.changeBodyStyle();
    }

    componentWillUnmount() {
        this.restoreBodyStyle();
    }

    changeBodyStyle() {
        if (bodyStyle) {
            return;
        }
        // Prevent body from scrolling when a modal is opened
        const body = document.querySelector('body');
        bodyStyle = {
            overflowY: body.style.overflowY
        };
        body.style.overflowY = 'hidden';
    }

    restoreBodyStyle() {
        if (bodyStyle) {
            const body = document.querySelector('body');
            body.style.overflowY = bodyStyle.overflowY;
            bodyStyle = null;
        }
    }

    render() {
        const { onClose, ...props } = this.props;

        return (
            <Modal
                {...props}
                onClose={() => {
                    this.restoreBodyStyle();
                    onClose();
                }}
            />
        );
    }
}

ModalWrapper.Overlay = Modal.Overlay;
ModalWrapper.Content = Modal.Content;
ModalWrapper.Header = Modal.Header;
ModalWrapper.Title = Modal.Title;
ModalWrapper.Body = Modal.Body;
ModalWrapper.Footer = Modal.Footer;

export default ModalWrapper;
```

## API

### Properties

Name | Type | Default | Description
:--- | :--- | :------ | :----------
onClose | Function | | A callback fired on clicking the overlay or the close button (x).
show | Boolean | true | Whether the modal is visible.
showCloseButton | Boolean | true | Whether the close button (x) is visible.
showOverlay | Boolean | true | Display an overlay in the background. Defaults to `true`.
disableOverlayClick | Boolean | false | Don't close the modal on clicking the overlay. Defaults to `false`.
overlayClassName | String | | className to assign to modal overlay.
overlayStyle | Object | | style to assign to modal overlay.
size | String | '' | One of: 'xs', 'sm', 'md', 'lg', 'extra-small', 'small', 'medium', 'large', or an empty string. Defaults to empty string that will automatically resize to fit contents.

### Size

Size | Value | Dimension
:--- | :---- | :--------
Auto | '' | 400px (minimum width)
Extra Small | 'xs', 'extra-small' | 400px (fixed width) x 240 px (minimum height)
Small | 'sm', 'small' | 544px (fixed width) x 304 px (minimum height)
Medium | 'md', 'medium' | 688px (fixed width) x 304 px (minimum height)
Large | 'lg', 'large' | 928px (fixed width) x 304 px (minimum height)

## License

MIT

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