The container reference to observe
The function to call for resize events
OptionaluseRequestAnimationFrame: booleanWhether to pass the handleResize function as a callback to requestAnimationFrame. Pass in true when the function passed in is not debounced.
The function used to unobserve resize events
This function creates a ResizeObserver used to handle resize events for the given containerRef. If ResizeObserver or the given containerRef are not available, a window resize event listener is used by default.
Example 1:
private containerRef = React.createRef();
private observer: any = () => {};
public componentDidMount() { this.observer = getResizeObserver(this.containerRef.current, this.handleResize, true); }
public componentWillUnmount() { this.observer(); }
private handleResize = () => { if (this.containerRef.current && this.containerRef.current.clientWidth) { this.setState({ width: this.containerRef.current.clientWidth }); } };
public render() { return (
Example 2:
private inputRef = React.createRef();
private observer: any = () => {};
public componentDidMount() { this.observer = getResizeObserver(this.inputRef.current, this.handleResize, true); }
public componentWillUnmount() { this.observer(); }
private handleResize = () => { if (this.inputRef.current) { trimLeft(inputRef.current, String(this.props.value)); } };
public render() { return ( <input ref={this.inputRef} ... /> ); }
Example 3 - With debounced method passed in:
public componentDidMount() { this.observer = getResizeObserver(this.inputRef.current, debounce(this.handleResize, 250)); }