window.innerWidth in real time

Question

I'm in need of getting the width of the browser when i resize the browser in real time. So far i've found a solution which gives the width but it's not in real time. The value is updated only after i refresh the web page. How can i get the value as i resize the browser.

My approach

render() {

var windowWidth = window.innerWidth;

return (

      <div className="body_clr">

        {windowWidth}

      </div>

)
}

This solution works if i refresh the page. But i want to get the width as i resize because i have to execute a function at a specific screen size.

https://stackoverflow.com/questions/19014250/rerender-view-on-browser-resize-with-react — brk, Aug 08 '18 at 10:27

score 9 · Accepted Answer · answered Aug 08 '18 at 10:34

Here's a way to do this:

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  constructor() {
    super();

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

    window.addEventListener("resize", this.update);
  }

  componentDidMount() {
    this.update();
  }

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

  render() {
    return (
      <React.Fragment>
        <p>height: {this.state.height}</p>
        <p>width: {this.state.width}</p>
      </React.Fragment>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Working CodeSandbox here.

Why would you use react when vanilla javascript would do the job? — Wais Kamal, Aug 08 '18 at 10:36
There's a `reactjs` tag on the question, so I thought it might be helpful. — Colin Ricardo, Aug 08 '18 at 10:37

score 6 · Answer 2 · answered Aug 08 '18 at 10:26

6

You can use event listeners:

window.addEventListener("resize", function() {
  return window.innerWidth;
});

answered Aug 08 '18 at 10:26

Wais Kamal

5,858
2
17
36

window.innerWidth in real time

2 Answers2