Responsive React Modal Component which renders the content passed to it. It have the ability to accept class name and inline styles for both modal and its overlay.

Demo.js

import React, { Component } from "react";
import Modal from "./Modal";

class Demo extends Component {
	constructor(props) {
		super(props);

		this.state = { isOpen: false };
	}

	toggleModal = () => {
		this.setState({
			isOpen: !this.state.isOpen
		});
	};

	render() {
		const demoOverlay = {
			background: "red"
		};

		const demoContent = {
			background: "yellow",
			padding: 0
		};

		return (
			<div>
				<button onClick={this.toggleModal}>Open the modal</button>

				<Modal
					show={this.state.isOpen}
					onClose={this.toggleModal}
					overlayClass="App"
					contentClass="App"
					overlayInlineStyle={demoOverlay}
					contentInlineStyle={demoContent}
				>
					Here you can put any content or component which you want to render
				</Modal>
			</div>
		);
	}
}

export default Demo;

Modal.css

.close {
    color: dimgrey;
    float: right;
    font-size: 28px;
    font-weight: bold;
    padding-right: 25px;
    padding-top: 15px;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.3);
    padding: 50px;
}

.modal-content {
    background-color: #fff;
    margin: 0 auto;
    padding: 30px;
    padding-top: 50px;
    min-height: 400px;
}

Modal.js

import React from "react";
import PropTypes from "prop-types";
import "./Modal.css";

class Modal extends React.Component {
	render() {
		if (!this.props.show) {
			return null;
		}
		return (
			<div
				className={`modal-overlay ${this.props.overlayClass}`}
				style={this.props.overlayInlineStyle}
			>
				<span onClick={this.props.onClose} className="close">
					&times;
				</span>
				<div
					className={`modal-content ${this.props.contentClass}`}
					style={this.props.contentInlineStyle}
				>
					{this.props.children}
				</div>
			</div>
		);
	}
}

Modal.propTypes = {
	onClose: PropTypes.func.isRequired,
	show: PropTypes.bool,
	children: PropTypes.node,
	overlayClass: PropTypes.string,
	contentClass: PropTypes.string,
	overlayInlineStyle: PropTypes.object,
	contentInlineStyle: PropTypes.object
};

export default Modal;