How to use react-modal - 10 common examples

it("has default props", () => {
    const node = document.createElement("div");
    Modal.setAppElement(document.createElement("div"));
    // eslint-disable-next-line react/no-render-return-value
    const modal = ReactDOM.render(, node);
    const props = modal.props;
    props.isOpen.should.not.be.ok();
    props.ariaHideApp.should.be.ok();
    props.closeTimeoutMS.should.be.eql(0);
    props.shouldFocusAfterRender.should.be.ok();
    props.shouldCloseOnOverlayClick.should.be.ok();
    ReactDOM.unmountComponentAtNode(node);
    ariaAppHider.resetForTesting();
    Modal.setAppElement(document.body); // restore default
  });

constructor(props) {
        super("srd-independent-node", props);                
        Modal.setAppElement('#main');        
        this.state = {};
        if(!(typeof(this.props.node.data) == "object")) {
            this.state.data = AllManipulators[this.constructor.name].getDefaultManipulatorParameters();            
            // attach data to node
            this.props.node.data = this.state.data;
        } else {
            this.state.data = this.props.node.data; 
        }        
	}

/**
 * Global modal centered floating element with custom title and a body building
 * function to allow more flexibility while creating the body.
 */
import React, { Component } from 'react';
import Modal from 'react-modal';


// Change to dark color theme.
Modal.defaultStyles.overlay.backgroundColor = '#333333AA';
Modal.defaultStyles.content.backgroundColor = '#222222CC';
Modal.defaultStyles.content.border = '#333333CC';


class GlobalModal extends Component {
    render() {
        return

/**
 * Global modal centered floating element with custom title and a body building
 * function to allow more flexibility while creating the body.
 */
import React, { Component } from 'react';
import Modal from 'react-modal';


// Change to dark color theme.
Modal.defaultStyles.overlay.backgroundColor = '#333333AA';
Modal.defaultStyles.content.backgroundColor = '#222222CC';
Modal.defaultStyles.content.border = '#333333CC';


class GlobalModal extends Component {
    render() {
        return

border: '1px solid #ccc',
        borderRadius: 0,
        top: '50%',
        left: '50%',
        right: 'auto',
        bottom: 'auto',
        marginRight: '-50%',
        padding: 0,
        transform: 'translate(-50%, -50%)'
    }
};

@CSSModules(styles, { allowMultiple: true })
class Modal extends Component {
    static propTypes = {
        ...ModalOverlay.propTypes,

        bsSize: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),

        // When 'true' the modal will show itself.
        show: PropTypes.bool,

        // Specify 'static' for a backdrop that doesn't trigger an "onHide" when clicked.
        backdrop: PropTypes.oneOf(['static', true, false]),

        // Specify whether the Component should contain a close button
        closeButton: PropTypes.bool,

        // A callback fired when the header closeButton or non-static backdrop is clicked.
        onHide: PropTypes.func
    };
    static defaultProps = {

overlayClassName="Modal--overlay"
    className={`Modal ${className}`}
    {...rest}
  >
    {children}
    
  
)

Modal.propTypes = {
  // React Modal
  ...ReactModal.propTypes,
  onRequestClose: PropTypes.func,

  // State
  children: PropTypes.node,

  // Modifiers
  className: PropTypes.string
}

Modal.defaultProps = {
  // React Modal
  onRequestClose: null,

  // State
  children: null,

ReactModal.setAppElement('#root')
const Modal = ({ onRequestClose, children, className, ...rest }) => (
  
    {children}
  
)

Modal.propTypes = {
  // React Modal
  ...ReactModal.propTypes,
  onRequestClose: PropTypes.func,

  // State
  children: PropTypes.node,

  // Modifiers
  className: PropTypes.string
}

Modal.defaultProps = {
  // React Modal
  onRequestClose: null,

  // State
  children: null,

bsSize: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),

        // When 'true' the modal will show itself.
        show: PropTypes.bool,

        // Specify 'static' for a backdrop that doesn't trigger an "onHide" when clicked.
        backdrop: PropTypes.oneOf(['static', true, false]),

        // Specify whether the Component should contain a close button
        closeButton: PropTypes.bool,

        // A callback fired when the header closeButton or non-static backdrop is clicked.
        onHide: PropTypes.func
    };
    static defaultProps = {
        ...ModalOverlay.defaultProps,
        bsSize: 'xs',
        show: true,
        backdrop: 'static',
        closeButton: true,
        onHide: noop
    };

    style = {
        overflowY: ''
    };

    componentDidMount() {
        this.style.overflowY = document.body.style.overflowY;
        document.body.style.overflowY = 'hidden'; // prevent body scrolling
    }
    componentWillUnmount() {

    should(() => ariaAppHider.setElement(".test")).throw();
  });

import React from "react";
import "./css/stock-update-modal.css";
import Modal from "react-modal";
import StockUpdateTable from "./stock-update-table.js";
import StockUpdateDelete from "./stock-update-delete.js";
import processRequest from "./api.js";

Modal.setAppElement(document.body);

Modal.defaultStyles.overlay.backgroundColor = "cornflowerblue";
const REGULAR_STYLES = {
  content: {
    top: "50%",
    left: "50%",
    right: "auto",
    bottom: "auto",
    marginRight: "-50%",
    transform: "translate(-50%, -50%)",
    backgroundColor: "#001e00",
    color: "yellow",
    border: "1px solid yellow",
    borderRadius: "7px 7px 7px 7px",
    boxShadow: "-7px -7px 17px 7px #001e00",
    maxWidth: "800px",