All files / platform/ui/src/hooks useResizeObserver.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
 
 
 
 
 
 
 
 
 
 
34x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { useEffect } from 'react';
 
/**
 * A resizeObserver React hook that with useEffect attaches a ResizeObserver to the
 * given element such that the given callback is invoked whenever the element is resized.
 * <p>
 * Care is taken to disconnect the ResizeObserver whenever either the element or the callback change.
 *
 * @param elem the element to listen for resizing
 * @param callback the callback to invoke when the element is resized
 */
const useResizeObserver = (elem: HTMLElement, callback: ResizeObserverCallback): void => {
  useEffect(() => {
    Iif (!elem || !callback) {
      return;
    }
 
    const resizeObserver = new ResizeObserver(callback);
    resizeObserver.observe(elem);
 
    return () => resizeObserver.disconnect();
  }, [elem, callback]);
};
 
export default useResizeObserver;