modal using styled components code example
Example: modal styled components
import React, { Component } from "react";import ReactDom from "react-dom";import PropTypes from "prop-types";// styledimport StyledModal from "./Modal.css";const modalRoot = document.getElementById("modal-root");class Modal extends Component { static defaultProps = { id: "", modalClass: "", modalSize: "md" };static propTypes = { id: PropTypes.string.isRequired, onClose: PropTypes.func.isRequired, isOpen: PropTypes.bool.isRequired, modalClass: PropTypes.string, modalSize: PropTypes.string };state = { fadeType: null };background = React.createRef();componentDidMount() { window.addEventListener("keydown", this.onEscKeyDown, false); setTimeout(() => this.setState({ fadeType: "in" }), 0); }componentDidUpdate(prevProps, prevState) { if (!this.props.isOpen && prevProps.isOpen) { this.setState({ fadeType: "out" }); } }componentWillUnmount() { window.removeEventListener("keydown", this.onEscKeyDown, false); }transitionEnd = e => { if (e.propertyName !== "opacity" || this.state.fadeType === "in") return;if (this.state.fadeType === "out") { this.props.onClose(); } };onEscKeyDown = e => { if (e.key !== "Escape") return; this.setState({ fadeType: "out" }); };handleClick = e => { e.preventDefault(); this.setState({ fadeType: "out" }); };render() { return ReactDom.createPortal( <StyledModal id={this.props.id} className={`wrapper ${this.props.class}`} role="dialog" modalSize={this.props.size} onTransitionEnd={this.transitionEnd} fadeType={this.state.fadeType} > <div className="box-dialog"> <div className="box-header"> <h4 className="box-title">Title Of Modal</h4> <button onClick={this.handleClick} className="close"> × </button> </div> <div className="box-content">{this.props.children}</div> <div className="box-footer"> <button onClick={this.handleClick} className="close"> Close </button> </div> </div> <div className={`background`} onMouseDown={this.handleClick} ref={this.background} /> </StyledModal>, modalRoot ); }}export default Modal;