feat: add useResizeObserver hook

docs/demo/hook.md

@@ -0,0 +1,3 @@
+## hook
+
+<code src="../../examples/hook.tsx">

examples/basic.tsx

@@ -1,6 +1,7 @@
 import '../assets/index.less';
 import React from 'react';
-import ResizeObserver, { ResizeObserverProps } from '../src';
+import type { ResizeObserverProps } from '../src/ResizeObserver';
+import ResizeObserver from '../src/ResizeObserver';
 
 export default function App() {
   const [times, setTimes] = React.useState(0);
@@ -17,7 +18,7 @@ export default function App() {
     offsetHeight,
     offsetWidth,
   }) => {
-    setTimes(prevTimes => prevTimes + 1);
+    setTimes((prevTimes) => prevTimes + 1);
     console.log(
       'Resize:',
       '\n',

examples/debug.tsx

@@ -1,6 +1,6 @@
 import '../assets/index.less';
 import React from 'react';
-import ResizeObserver from '../src';
+import ResizeObserver from '../src/ResizeObserver';
 
 export default function App() {
   const [times, setTimes] = React.useState(0);
@@ -9,7 +9,7 @@ export default function App() {
   const [disabled, setDisabled] = React.useState(false);
 
   const onResize = (size: { width: number; height: number }) => {
-    setTimes(prevTimes => prevTimes + 1);
+    setTimes((prevTimes) => prevTimes + 1);
     setWidth(size.width);
     setHeight(size.height);
   };

examples/hook.tsx

@@ -0,0 +1,53 @@
+import '../assets/index.less';
+import React from 'react';
+import type { OnResizeHandler } from '../src/OnResizeHandler';
+import { useResizeObserver } from '../src/useResizeObserver';
+
+export default function App() {
+  const [times, setTimes] = React.useState(0);
+  const [disabled, setDisabled] = React.useState(false);
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+
+  const onResize: OnResizeHandler = ({ width, height, offsetWidth, offsetHeight }) => {
+    setTimes((prevTimes) => prevTimes + 1);
+    console.log(
+      'Resize:',
+      '\n',
+      'BoundingBox',
+      width,
+      height,
+      '\n',
+      'Offset',
+      offsetWidth,
+      offsetHeight,
+    );
+  };
+
+  useResizeObserver({ ref: textareaRef, onResize, disabled });
+
+  React.useEffect(() => {
+    console.log('Ref:', textareaRef.current);
+  }, []);
+
+  return (
+    <React.StrictMode>
+      <div style={{ transform: 'scale(1.1)', transformOrigin: '0% 0%' }}>
+        <div>
+          <label>
+            <input
+              type="checkbox"
+              onChange={() => {
+                setDisabled(!disabled);
+              }}
+              checked={disabled}
+            />{' '}
+            Disabled Observe
+          </label>
+          {' >>> '}
+          <span>Resize times: {times}</span>
+        </div>
+        <textarea ref={textareaRef} placeholder="I'm a textarea!" />
+      </div>
+    </React.StrictMode>
+  );
+}

src/OnResizeHandler.d.ts

@@ -0,0 +1,3 @@
+import type { Size } from './Size';
+
+export type OnResizeHandler = (size: Size, element: HTMLElement) => void;

src/index.tsx → src/ResizeObserver.tsx

@@ -4,35 +4,24 @@ import toArray from 'rc-util/lib/Children/toArray';
 import warning from 'rc-util/lib/warning';
 import { composeRef, supportRef } from 'rc-util/lib/ref';
 import ResizeObserver from 'resize-observer-polyfill';
+import type { Size } from './Size';
+import type { OnResizeHandler } from './OnResizeHandler';
 
 const INTERNAL_PREFIX_KEY = 'rc-observer-key';
 
 export interface ResizeObserverProps {
   children: React.ReactNode;
   disabled?: boolean;
   /** Trigger if element resized. Will always trigger when first time render. */
-  onResize?: (
-    size: {
-      width: number;
-      height: number;
-      offsetWidth: number;
-      offsetHeight: number;
-    },
-    element: HTMLElement,
-  ) => void;
+  onResize?: OnResizeHandler;
 }
 
-interface ResizeObserverState {
-  height: number;
-  width: number;
-  offsetHeight: number;
-  offsetWidth: number;
-}
+type ResizeObserverState = Size;
 
 type RefNode = React.ReactInstance | HTMLElement | null;
 
 // Still need to be compatible with React 15, we use class component here
-class ReactResizeObserver extends React.Component<ResizeObserverProps, ResizeObserverState> {
+export class ReactResizeObserver extends React.Component<ResizeObserverProps, ResizeObserverState> {
   static displayName = 'ResizeObserver';
 
   resizeObserver: ResizeObserver | null = null;

src/Size.d.ts

@@ -0,0 +1,6 @@
+export type Size = {
+  width: number;
+  height: number;
+  offsetWidth: number;
+  offsetHeight: number;
+};

src/index.ts

@@ -0,0 +1,7 @@
+import { ReactResizeObserver } from './ResizeObserver';
+
+export { ResizeObserverProps } from './ResizeObserver';
+export { useResizeObserver, UseResizeObserverArgs } from './useResizeObserver';
+export { Size } from './Size.d';
+export { OnResizeHandler } from './OnResizeHandler.d';
+export default ReactResizeObserver;

src/useResizeObserver.tsx

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import type { OnResizeHandler } from './OnResizeHandler';
+import type { Size } from './Size';
+
+export interface UseResizeObserverArgs {
+  ref: React.RefObject<React.ReactNode>;
+  onResize?: OnResizeHandler;
+  disabled?: boolean;
+}
+
+export function useResizeObserver({
+  ref,
+  onResize: resizeHandler,
+  disabled,
+}: UseResizeObserverArgs): Size {
+  const observerRef = React.useRef<ResizeObserver>();
+  const elementRef = React.useRef<HTMLElement>();
+
+  const [height, setHeight] = React.useState(0);
+  const [width, setWidth] = React.useState(0);
+  const [offsetHeight, setOffsetHeight] = React.useState(0);
+  const [offsetWidth, setOffsetWidth] = React.useState(0);
+
+  const destroyObserver = React.useCallback(() => {
+    if (observerRef.current) {
+      observerRef.current.disconnect();
+      observerRef.current = null;
+    }
+  }, [observerRef]);
+
+  const onResize = React.useCallback(
+    (entries: ResizeObserverEntry[]): void => {
+      const target = entries[0].target as HTMLElement;
+
+      const { width: _width, height: _height } = target.getBoundingClientRect();
+      const { offsetWidth: _offsetWidth, offsetHeight: _offsetHeight } = target;
+
+      /**
+       * Resize observer trigger when content size changed.
+       * In most case we just care about element size,
+       * let's use `boundary` instead of `contentRect` here to avoid shaking.
+       */
+      const fixedWidth = Math.floor(_width);
+      const fixedHeight = Math.floor(_height);
+
+      if (
+        width !== fixedWidth ||
+        height !== fixedHeight ||
+        offsetWidth !== _offsetWidth ||
+        offsetHeight !== _offsetHeight
+      ) {
+        setHeight(fixedHeight);
+        setWidth(fixedWidth);
+        setOffsetHeight(_offsetHeight);
+        setOffsetWidth(_offsetWidth);
+
+        if (resizeHandler) {
+          Promise.resolve().then(() => {
+            resizeHandler(
+              {
+                width: fixedWidth,
+                height: fixedHeight,
+                offsetWidth: _offsetWidth,
+                offsetHeight: _offsetHeight,
+              },
+              target,
+            );
+          });
+        }
+      }
+    },
+    [width, height, offsetWidth, offsetHeight, resizeHandler],
+  );
+
+  const repopulateObserver = React.useCallback(() => {
+    if (disabled) {
+      destroyObserver();
+      return;
+    }
+
+    const element = ref.current as HTMLElement;
+    const elementChanged = element !== elementRef.current;
+    if (elementChanged) {
+      destroyObserver();
+      elementRef.current = element;
+    }
+
+    if (!observerRef.current && element) {
+      observerRef.current = new ResizeObserver(onResize);
+      observerRef.current.observe(element);
+    }
+  }, [destroyObserver, disabled, onResize, ref]);
+
+  React.useEffect(() => {
+    repopulateObserver();
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      destroyObserver();
+    };
+  }, [repopulateObserver, destroyObserver]);
+
+  return {
+    width,
+    height,
+    offsetWidth,
+    offsetHeight,
+  };
+}
+
+export default useResizeObserver;