React Modal with bootstrap style

react-modal

Modal dialogs are used to get a response from a user before other features can be assessed from the main page.

Use one of these 4 modal sizes depending on your needs and requirements:

Auto400px (minimum width)
Extra Small400px (fixed width) x 240 px (minimum height)
Small544px (fixed width) x 304 px (minimum height)
Medium688px (fixed width) x 304 px (minimum height)
Large928px (fixed width) x 304 px (minimum height)

Installation

  1. Install the latest version of react and react-modal:
npm install --save react @trendmicro/react-modal
  1. 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.
disableOverlay 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 Dimension
Auto 400px (minimum width)
Extra Small 400px (fixed width) x 240 px (minimum height)
Small 544px (fixed width) x 304 px (minimum height)
Medium 688px (fixed width) x 304 px (minimum height)
Large 928px (fixed width) x 304 px (minimum height)

GitHub