Get viewport/window height in ReactJS

import { useState, useEffect } from 'react';



function getWindowDimensions() {

  const { innerWidth: width, innerHeight: height } = window;

  return {

    width,

    height

  };

}



export default function useWindowDimensions() {

  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());



  useEffect(() => {

    function handleResize() {

      setWindowDimensions(getWindowDimensions());

    }



    window.addEventListener('resize', handleResize);

    return () => window.removeEventListener('resize', handleResize);

  }, []);



  return windowDimensions;

}

const Component = () => {

  const { height, width } = useWindowDimensions();



  return (

    <div>

      width: {width} ~ height: {height}

    </div>

  );

}

constructor(props) {

  super(props);

  this.state = { width: 0, height: 0 };

  this.updateWindowDimensions = this.updateWindowDimensions.bind(this);

}



componentDidMount() {

  this.updateWindowDimensions();

  window.addEventListener('resize', this.updateWindowDimensions);

}



componentWillUnmount() {

  window.removeEventListener('resize', this.updateWindowDimensions);

}



updateWindowDimensions() {

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

}

class AppComponent extends React.Component {



  constructor(props) {

    super(props);

    this.state = {height: props.height};

  }



  componentWillMount(){

    this.setState({height: window.innerHeight + 'px'});

  }



  render() {

    // render your component...

  }

}

AppComponent.propTypes = {

 height:React.PropTypes.string

};



AppComponent.defaultProps = {

 height:'500px'

};