withWindowDimensions React.js HOC

withWindowDimensions.js

import React, {Component} from 'react'
import hoistNonReactStatic from 'hoist-non-react-statics'

export default function(WrappedComponent){
  class withWindowDimensions extends Component{
      constructor(props){
          super(props)
          this.updateDimensions = this.updateDimensions.bind(this)
      }

      updateDimensions(){
        this.setState({
          width: window.innerWidth,
          height: window.innerHeight
        })
      }

      componentDidMount(){
        window.addEventListener("resize", this.updateDimensions)
      }

      componentWillUnmount(){
        window.removeEventListener("resize", this.updateDimensions)
      }

      componentWillMount(){
        this.updateDimensions()
      }

      render(){
        return (
          <WrappedComponent
            windowWidth={this.state.width}
            windowHeight={this.state.height}
            {...this.props}
          />
        )
      }
  }
  
  withWindowDimensions.displayName = `withWindowDimensions(${getDisplayName(WrappedComponent)})`
  hoistNonReactStatic(withWindowDimensions, WrappedComponent)
  return withWindowDimensions
}

function getDisplayName(WrappedComponent) {
  return WrappedComponent.displayName || WrappedComponent.name || 'Component'
}