adjust window height to match mobile safari visible viewport height in React

mobile_safari_height_adjust.jsx

# height adjust for mobile safari 
# for when you sometimes need the window height to be the actual visible viewport

export default class MyComponent extends React.Component  {

  constructor(props) {
    super(props)
    this.state = {
      height_adjust: 0,
    }
  }


  componentDidMount() {

    if (!this.state.height_adjust === 0) {
      const is_portrait = window.innerHeight > window.innerWidth
      const is_min_height = window.innerHeight > 520  

      if (is_portrait && is_min_height && window.innerHeight < this.container.getBoundingClientRect().height) {
        this.setState({ height_adjust: window.innerHeight })
      }
    }
}

  mobile_window_height_adjust() {
    if (!this.state.height_adjust) return

    return {
      height: this.state.height_adjust + "px",
    }
  }


render() {
    return (
      <div style={this.mobile_window_height_adjust()}>
		      ...my stuff
      </div>
}