Modal window for React

Install

$ npm i andy-react-modal

Use

import Modal from 'andy-react-modal';
import 'andy-react-modal/sass/index.scss'; // if you need standart styles

then in the react component add state:

this.state = {
    showModal: false
}

then add toggle method like:

showModal() {
    this.setState({
        showModal: !this.state.showModal
    })
}

and then add component with props to render like:

<Modal
    cssClass="your custom class" // if you need custom styles
    showModal={this.showModal.bind(this)}
    isShow={this.state.showModal}>
    <p>this is modal window content</p>
</Modal>

another props:

if you want to render your modal in custom element - set element you like:

<Modal
    parent={your custom parent element}>
    <p>this is modal window content</p>
</Modal>

if you don't want close btn or key esc or click outside to close:

<Modal
    noClickOut={true}
    noEsc={true}
	noCloseBtn={true}>
    <p>this is modal window content</p>
</Modal>

SASS

sass shuld be like:

.modal-window {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(#000, 0.5);
    z-index: 9999;

    &__body {
        position: relative;
        min-width: 400px;
        min-height: 300px;
        background-color: #fff;

        &:focus {
            outline: none;
        }
    }

    &__close {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 20px;
        height: 20px;
        transform: rotate(45deg);
        cursor: pointer;

        &:hover {
            &::after { background-color: #999; }
            &::before { background-color: #999; }
        }

        &::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: #333;
        }

        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            width: 1px;
            height: 100%;
            background-color: #333;
        }
    }
}