text: import React from 'react';
  import { Motion, spring } from 'react-motion';
  
  export default class extends React.Component {
  
    constructor(props) {
      super(props)
      this.state = { isReady: false }
    }
  
    componentDidMount() {
      this.setState({ isReady:true })
      window.addEventListener('resize', this.adjustContainer, false)
      window.addEventListener("deviceorientation", this.handleOrientation, true);
    }
  
    adjustContainer = (e) => {
      this.setState({ height: spring(e.currentTarget.innerHeight) })
    }
  
    render() {
      const { children } = this.props
  
      if (this.state.isReady) {
          if( this.props.fullHeight ) { this.props.containerStyle.height = window.innerHeight }
          return ( <div ref="container" style={ this.props.containerStyle }> { children } </div> )
      } else {
          return <div>Parallax hover is not yet ready.</div>
      }
    }
  
    static Layer = class extends React.Component {
  
          constructor(props) {
            super(props)
            this.resizeTimeout = false
            this.config = this.props.config
            this.state = {
              toStyle: {
                bottom: 0,
                left: 0,
              }
            }
          }
  
          componentDidMount() {
            window.addEventListener('mousemove', this.updatePosition, false)
            window.addEventListener("deviceorientation", this.handleOrientation, true);
          }
  
          componentWillUnmount() {
            window.removeEventListener('mousemove', this.updatePosition, false)
            window.removeEventListener("deviceorientation", this.handleOrientation, true);
          }
  
          handleOrientation = (e) => {
            if ( !this.resizeTimeout ) {
              this.resizeTimeout = setTimeout(() => {
                this.resizeTimeout = null;
                const xFactor = this.config.xFactor
                const yFactor = this.config.yFactor
                var getYFromCenter = yFactor * ((e.target.innerHeight / 2) - e.alpha / e.gamma)
                var getXFromCenter = xFactor * ((e.target.innerWidth / 2) - e.alpha / e.gamma)
                this.setState({
                  toStyle: {
                    bottom: spring(getYFromCenter, this.config.springSettings),
                    left: spring(getXFromCenter, this.config.springSettings)
                  }
                })
              }, 75);
            }
          }
  
          updatePosition = (e) => {
            if ( !this.resizeTimeout ) {
              this.resizeTimeout = setTimeout(() => {
                this.resizeTimeout = null;
                const xFactor = this.config.xFactor
                const yFactor = this.config.yFactor
                var getYFromCenter = yFactor * ((e.view.innerHeight / 2) - e.clientY)
                var getXFromCenter = xFactor * ((e.view.innerWidth / 2) - e.clientX)
                this.setState({
                  toStyle: {
                    bottom: spring(getYFromCenter, this.config.springSettings),
                    left: spring(getXFromCenter, this.config.springSettings)
                  }
                })
              }, 75);
            }
          }
  
          render() {
  
            const { children } = this.props
  
            return (
                  <Motion defaultStyle={this.props.layerStyle} style={this.state.toStyle}>{motionStyle =>
                    <div ref="layer" style={{...motionStyle, ...this.props.layerStyle}}>
                      { children }
                    </div>
                  }</Motion>
              )
          }
      }
  }
  