React Portals

Overlay.jsx

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import { rgba } from 'polished';

const Wrapper = styled.div`
  position: absolute;
  z-index: 10000;
  &::before {
    content: '';
    position: fixed;
    display: block;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: ${({ theme }) => rgba(theme.colors.neutral1, 0.65)};
    z-index: 1;
  }
`;

export default class Overlay extends Component {
  static propTypes = {
    children: PropTypes.node,
  };

  el = typeof document !== 'undefined' && document.createElement('div');

  componentDidMount() {
    document.body.appendChild(this.el);
  }

  componentWillUnmount() {
    document.body.removeChild(this.el);
  }

  render() {
    return ReactDOM.createPortal(
      <Wrapper>
        {this.props.children}
      </Wrapper>,
      this.el,
    );
  }
}