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

Saturday, July 27, 2013

jQuery Window After Resize Event

afterResize.js

If you have ever used jQuery's .resize() method to detect a window resize you may be aware that most browsers don't wait for the resize event to finish before it triggers a callback. Instead the event and it's callback is fired rapidly until the resize is complete.

This very simple jQuery plugin is designed to emulate an 'after resize' event. It works by adding the callback to a queue to be executed after a duration. If the event is triggered again before the end of this duration, it is restarted and the callback will not execute until the duration can finish.

Example

$(document).ready( function() {
    $(window).afterResize( function() {
        alert('Resize event has finished');
    }, true, 100 );
});

Download after resize jquery plugin

Original content area on github

Pages