@trendmicro/react-modal

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

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';

Usage

import React, { Component, PropTypes } from 'react';
import { Button } from '@trendmicro/react-buttons';
import Modal from '@trendmicro/react-modal';
import '@trendmicro/react-buttons/dist/react-buttons.css';
import '@trendmicro/react-modal/dist/react-modal.css';

class ModalDialog extends Component {
    static propTypes = {
        state: PropTypes.object,
        actions: PropTypes.object
    };

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

        return (
            <Modal
                show={state.showModal}
                onClose={actions.closeModal}
            >
                <Modal.Header>
                    <Modal.Title>
                        Modal Title
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body padding={true}>
                    Modal Body
                </Modal.Body>
                <Modal.Footer>
                    <Button
                        btnStyle="primary"
                        onClick={actions.closeModal}
                    >
                        Save
                    </Button>
                    <Button
                        onClick={actions.closeModal}
                    >
                        Close
                    </Button>
                </Modal.Footer>
            </Modal>
        );
    }
}

API

Properties

Name	Type	Default	Description
closeOnOverlayClick	Boolean	true	By default the modal is closed when clicking the overlay area. You can pass 'closeOnOverlayClick' prop with 'false' value if you want to prevent this behavior.
onClose	Function		A callback fired when clicking the close button (x×) or the overlay area.
onOpen	Function		A callback fired after opening a modal.
show	Boolean	true	Specify whether to show the modal.
showCloseButton	Boolean	true	Specify whether the modal should contain a close button (x).
showOverlay	Boolean	true	Pass 'showOverlay' prop with 'true' value to add an overlay to the background, and 'false' otherwise.
size	String	'xs'	Extra Small (400px x 240px): 'xs' or 'extra-small' Small (544px x 304px): 'sm' or 'small' Medium (688px x 304px): 'md' or 'medium' Large (928px x 304px): 'lg' or 'large'

License

MIT