Modal: Component

Author: rajeshpillai

src/App.js

@@ -2,14 +2,35 @@ import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
 import InputTag from './components/InputTag';
+import Modal from './components/Modal/Modal';
 
 
 class App extends Component {
+  state = {
+    show: false
+  }
+
+  showModal = () => {
+    this.setState({
+      ...this.state,
+      show: !this.state.show
+    });
+  }
   render() {
     return (
       <div className="App">
         <InputTag placeholder="press enter/space to + tag" />
 
+        <input type="button"
+          onClick={this.showModal}
+          value="Show Modal" />
+
+        <Modal 
+            onClose={this.showModal}
+            show={this.state.show}>
+            This message is from Modal!
+        </Modal>
+
       </div>
     );
   }

src/components/Modal/Modal.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// gray background
+const backdropStyle = {
+    position: 'fixed',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: 'rgba(0,0,0,0.3)',
+    padding: 50
+}
+
+const modalStyle = {
+    backgroundColor: '#fff',
+    borderRadius: 5,
+    maxWidth: 500,
+    minHeight: 300,
+    margin: '0 auto',
+    padding: 30,
+    position: "relative"
+};
+
+const footerStyle = {
+    position: "absolute",
+    bottom: 20
+};
+
+export default class Modal extends React.Component {
+    onClose = (e) => {
+        this.props.onClose && this.props.onClose(e);
+    }
+    render() {
+        if (!this.props.show) {
+            return null;
+        }
+        return (
+            <div style={backdropStyle}>
+                <div style={modalStyle}>
+                    {this.props.children}
+                    <div style={footerStyle}>
+                        <button onClick={(e) => { this.onClose(e)}}>
+                            Close
+                        </button>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
+
+Modal.propTypes = {
+    onClose: PropTypes.func.isRequired
+}