init

platform/ui/src/hooks/useResizeObserver.ts

@@ -0,0 +1,25 @@
+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(() => {
+    if (!elem || !callback) {
+      return;
+    }
+
+    const resizeObserver = new ResizeObserver(callback);
+    resizeObserver.observe(elem);
+
+    return () => resizeObserver.disconnect();
+  }, [elem, callback]);
+};
+
+export default useResizeObserver;