Thursday, March 12, 2020

React Component on Window Resize Event

React doesn't have a resize event integrated into it, but we can listen to the native browser window resize event from within our React component. We will attach window resize event into componentDidMount method.
Under normal conditions, React will re-render a component when its props or state changes. To trigger a re-render of Component in the example, we'll set internal state on the component when the event is fired. So we can set/update state variable to tell React Component to update. We can implement method componentDidUpdate to acknoledged something changed.
When adding an event listener, such as we are for the resize event, we should make sure to clean up after ourselves. We will clean up any type of listener we added into method componentWillUnmount.
Example code given below:
import React from "react";
import "./styles.css";

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

    // we will update below state variables to tell react component
    // to update, only state or props change can update react component
    this.state = {
      width: 0,
      height: 0
    };

    // we will use this timer to less fire resize event
    // practially we will fire resize event 500 miliseconds after
    this.timer = null;

    // we will catch windows resize event into below function
    this.windowResized = this.windowResized.bind(this);

    // we will handle resize event so resize event will
    // be in some time interval, less freequent 
    this.updateWindowWidth = this.updateWindowWidth.bind(this);
  }

  componentDidMount() {
    window.addEventListener("resize", this.windowResized);
    this.updateWindowWidth();
  }

  componentDidUpdate() {
    console.log(
      `Window width/height changed to ${this.state.width}X${this.state.height}`
    );
  }

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

  updateWindowWidth() {
    let _this = this;
    setTimeout(function() {
      _this.setState({
        width: window.innerWidth,
        height: window.innerHeight
      });
    });
  }

  windowResized() {
    let _this = this;
    if (this.timer) {
      clearTimeout(this.timer);
    }
    this.timer = setTimeout(function() {
      _this.updateWindowWidth();
    }, 500);
  }

  render() {
    return (
      <div className="App">
        <h1>
          WIDTH={this.state.width} HEIGHT={this.state.height}
        </h1>
      </div>
    );
  }
}

export default App;
Sample Image:

Live Example:

https://codesandbox.io/s/react-component-on-window-resize-event-3b29u

3 comments:

  1. Thanks again for the article post.Really thank you! Fantastic.
    dot net online course
    . net online training

    ReplyDelete
  2. Code Samples: React Component On Window Resize Event >>>>> Download Now

    >>>>> Download Full

    Code Samples: React Component On Window Resize Event >>>>> Download LINK

    >>>>> Download Now

    Code Samples: React Component On Window Resize Event >>>>> Download Full

    >>>>> Download LINK p1

    ReplyDelete
  3. Code Samples: React Component On Window Resize Event >>>>> Download Now

    >>>>> Download Full

    Code Samples: React Component On Window Resize Event >>>>> Download LINK

    >>>>> Download Now

    Code Samples: React Component On Window Resize Event >>>>> Download Full

    >>>>> Download LINK xs

    ReplyDelete