Jabran Saeed Jabran Saeed - 2 years ago 350
Javascript Question

Get viewport/window height in ReactJS

How to get viewport's height???

window.innerHeight()


But using reactjs, I'm not sure how to get this information. My understanding is that

ReactDOM.findDomNode()


only works for components created. However this is not the case for the document or body element, which could give me height of the window.

Answer Source
class AppComponent extends React.Component {
  constructor(props) {
  super(props);
  this.state = {height: props.height};
}

componentDidMount(x,y,z){
 this.setState({height:window.innerHeight+'px'});
}
render() { ...

Set the props

AppComponent.propTypes = {
 height:React.PropTypes.string
};

AppComponent.defaultProps = {
 height:'500px'
};

viewport height is now available as {this.state.height} in rendering template

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download