react-images/src/components/Portal.js

A mobile-friendly, highly customizable, carousel component for displaying media in ReactJS

import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { CSSTransition, TransitionGroup } from 'react-transition-group'
import { render, unmountComponentAtNode } from 'react-dom'
import PassContext from './PassContext'

export default class Portal extends Component {
  constructor() {
    super()
    this.portalElement = null
  }
  componentDidMount() {
    const p = document.createElement('div')
    document.body.appendChild(p)
    this.portalElement = p
    this.componentDidUpdate()
  }
  componentDidUpdate() {
    // Animate fade on mount/unmount
    const duration = 200
    const styles = `
				.fade-enter { opacity: 0.01; }
				.fade-enter.fade-enter-active { opacity: 1; transition: opacity ${duration}ms; }
				.fade-leave { opacity: 1; }
				.fade-leave.fade-leave-active { opacity: 0.01; transition: opacity ${duration}ms; }
		`

    render(
      <PassContext context={this.context}>
        <div>
          <style>{styles}</style>
          <TransitionGroup {...this.props}>
            <CSSTransition timeout={{ enter: duration, exit: duration }} classNames="fade">
              {this.props.children}
            </CSSTransition>
          </TransitionGroup>
        </div>
      </PassContext>,
      this.portalElement,
    )
  }
  componentWillUnmount() {
    unmountComponentAtNode(this.portalElement)
    document.body.removeChild(this.portalElement)
  }
  render() {
    return null
  }
}

Portal.contextTypes = {
  theme: PropTypes.object.isRequired,
}