react-modal

React Modal

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

Installation

1. Install the latest version of react and 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:

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

import '@trendmicro/react-buttons/dist/react-buttons.css';

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

components/Modal/index.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:

import Modal from './components/Modal';

Usage

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.

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