@sysopnecho/react-modal NPM

React-Modal

react-modal is a simple method to create component modals for React. It's written using ES6 with Grunt and Browserify.

Installation

npm install @sysopnecho/react-modal --save

React-Modal depends of react, react-dom, classnames, prop-types. You may install these dependencies:

npm install react react-dom classnames prop-types --save

How to use

1.- first of all, you have to use ModalContainer to mark where you want to render your modal compoments:

import React from 'react';
import ReactDOM from 'react-dom';
import { ModalContainer } from '@sysopnecho/modal';

const App = () => 
<div>
    <h1>react-modal example</h1>
    <ModalContainer/>
</div>

ReactDOM.render(<App></App>, document.getElementById('app'));

2.- Then, to render a component modal you have to call openModal function and pass your component and props:

import React from 'react';
import { openModal } from '@sysopnecho/modal';
import MyModalComponent from 'components/modals';

export default class ParentComponentView extends React.Component {
    constructor(props){
        super(props);
        this.openMyModalComponent = this.openMyModalComponent.bind(this);
    }
    
    openMyModalComponent(){
        openModal(MyModalComponent, {
            prop1: 'a string prop',
            prop2: 100 // a number prop,
            onClose: this.onCloseMyModalComponent.bind(this) //a callback
        });
    }
    
    onCloseMyModalComponent(args){
        console.log(args);
    }
    
    render(){
        return (
            <div>Lorem ipsum
                <button onClick={this.openMyModalComponent}>Open MyModalComponent modal</button>
            </div>
        )
    }
}

3.- Use closeModal to close the current modal.

import React from 'react';
import { closeModal, Modal, ModalHeader, ModalBody, ModalFooter } from '@sysopnecho/modal';

export default class MyModalComponent extends React.Component {
    constructor(props){
        super(props);
        this.closeThisModal = this.closeThisModal.bind(this);
    }
    
    componentWillUnmount(){
        if (typeof this.props.onClose == 'function') {
            this.props.onClose({
                Message: 'some for ParentComponentView'
            });
        }
    }
    
    closeThisModal(){
        closeModal();
    }
    
    render(){
        return (
            <Modal size="medium">
                <ModalHeader>
                    <h1>My Modal Component</h1>
                </ModalHeader>
                <ModalBody>
                    <span>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</span>
                    <br></br>
                    <span>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</span>
                </ModalBody>
                <ModalFooter>
                    <strong>inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo</strong>
                    <button onClick={this.closeThisModal}>Close Modal</button>
                </ModalFooter>
            </Modal>
        )
    }
}

Note: when you extend your component with Modal you don't need import openModal to open a new modal, you can use super.openModal and super.closeModal.

4.- you also need import the basic styles:

@import '@sysopnecho/modal/dist/sass/main' //using './node_modules' in sass path

If you want, can use themes included:

@import '@sysopnecho/modal/dist/sass/main' //using './node_modules' in sass path
@import '@sysopnecho/modal/dist/sass/themes/light' //using './node_modules' in sass path

Note: by default, it uses the following css classes when renders modals. You must cumtomize it:
sbj_has-modal for body element (indicate that there is a opened modal)
sbj_modal-container for container element
sbj_modal-backdrop for modal backdrop (one that changes its zindex)
sbj_modal for rendered modal component (over modal backdrop)
sbj_modal-body for all contents inside <Modal></Modal>