import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Portal extends Component<PortalProps> {
  el: any;
  wrapper: HTMLElement;
  constructor(props: PortalProps) {
    super(props);
    this.wrapper = document.getElementById(props.targetId)
    this.el = document.createElement('div')
    this.el.className = props.containerClass
  }

  componentDidMount() {
    this.wrapper.appendChild(this.el)
  }

  componentWillUnmount() {
    this.wrapper.removeChild(this.el)
  }

  render() {
    return ReactDOM.createPortal(
      this.props.children,
      this.el
    );
  }
}

export default Portal;

interface PortalProps {
  targetId: string,
  containerClass: string,
}