Simple Modal in React (ES6)

Developer
Fabio Biondi
Size
4,581 Kb
Views
30,360
  1. Simple Modal in React (ES6) Previews
  2. Simple Modal in React (ES6) HTML Codes
  3. Simple Modal in React (ES6) CSS Codes
  4. Simple Modal in React (ES6) JS Codes

How do I make an simple modal in react (es6)?

In this snippet I have created a simple reusable Modal component in React in order to explore some of the basic features of this amazing library.. What is a simple modal in react (es6)? How do you make a simple modal in react (es6)? This script and codes were developed by Fabio Biondi on 13 October 2022, Thursday.

Simple Modal in React (ES6) Previews
IQ Test

Simple Modal in React (ES6) - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Modal in React (ES6)</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src=""></script>
<div id="react_app"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple Modal in React (ES6) - Script Codes CSS Codes

html, body, #react_app, #react_app > div { height: 100%;
}
.modal-wrapper { position: fixed; width: 100%; height: 100%; display: -webkit-flex; flex-direction: column; -webkit-flex-direction: column; justify-content: center; color: white;
}
.modal-item { align-self: center;
}
img { width: 200px; height: 200px;
}
.glyphicon { font-size: 20px; padding: 10px; color: white; cursor: pointer;
}
.btn { margin: 10px;
}

Simple Modal in React (ES6) - Script Codes JS Codes

"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var /** * App.js * Create a custom <Modal/> component to display dynamic content */
App = function (_React$Component) { _inherits(App, _React$Component); function App(props) { _classCallCheck(this, App); // Init state var _this = _possibleConstructorReturn(this, _React$Component.call(this, props)); _this.state = { modalOpen: props.opened, pic: props.welcomePicture }; return _this; } // Toggle Modal visibility App.prototype.toggleModal = function toggleModal(pic) { var state = this.state.modalOpen; // Update state: modal visibility and its content this.setState({ modalOpen: !state, pic: pic }); }; App.prototype.render = function render() { var _this2 = this; var _state = this.state; var modalOpen = _state.modalOpen; var pic = _state.pic; return React.createElement( "div", null, React.createElement( Modal, { bg: "#222", show: modalOpen, onClose: this.toggleModal.bind(this) }, React.createElement("img", { src: pic }) ), React.createElement( "button", { className: "btn", onClick: this.toggleModal.bind(this, 'http://lorempixel.com/200/200/business/1') }, "Business" ), React.createElement( "button", { className: "btn", onClick: function onClick() { return _this2.toggleModal('http://lorempixel.com/400/200/nature/1'); } }, "Fashion" ) ); }; return App;
}(React.Component);
/** * Reusable Modal Component */
var Modal = function (_React$Component2) { _inherits(Modal, _React$Component2); function Modal() { _classCallCheck(this, Modal); return _possibleConstructorReturn(this, _React$Component2.apply(this, arguments)); } Modal.prototype.render = function render() { var _props = this.props; var show = _props.show; var bg = _props.bg; var closeModal = _props.closeModal; // Custom styles: set visibility and backbround color var styles = { modal: { display: show ? null : 'none', backgroundColor: bg || 'rgba(255, 255, 255, 0.8)' } }; return React.createElement( "div", { className: "modal-wrapper", style: styles.modal }, React.createElement("span", { className: "glyphicon glyphicon-remove-sign modal-item", onClick: this.props.onClose }), React.createElement( "div", { className: "modal-item" }, this.props.children ) ); }; return Modal;
}(React.Component);
// Init App
// We pass some parameters to define the visibility and content of the modal when the application starts.
React.render(React.createElement(App, { opened: true, welcomePicture: "http://lorempixel.com/200/200/abstract/1/Welcome/" }), document.getElementById('react_app'));
Simple Modal in React (ES6) - Script Codes
Simple Modal in React (ES6) - Script Codes
Home Page Home
Developer Fabio Biondi
Username fabiobiondi
Uploaded October 13, 2022
Rating 3
Size 4,581 Kb
Views 30,360
Do you need developer help for Simple Modal in React (ES6)?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Fabio Biondi (fabiobiondi) Script Codes
Name
AngularJS 1.2.x - FullScreen Directive
Realtime todo-list in AngularJS and Firebase in 20 lines
FlexBox - Grid 2 rows with different columns
AngularJS - Day 1 - Boilerplate
AngularJS Form Validation
AngularJS Directive - YouTube DATA API example
Resizable directive in AngularJS and jQueryUI
D3 Pack Layout with transitions and tooltips
Responsive DOM elements distribution with D3 and Scales
D3.js Multi-Foci Force layout animated example
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!