自定义 React Hook：useResizeObserver

在这篇文章中，我将分享一个名为 useResizeObserver 的自定义 React 钩子。该钩子可帮助您观察并获取 DOM 元素的边界客户端矩形，并在调整元素大小时更新该矩形。它是我的 React 库的一部分，react-helper-hooks，其中包含许多有用的钩子，可以节省开发人员的时间。

源代码

import { useEffect, useRef, useState } from 'react';

type ObserverRect = Omit<DOMRectReadOnly, 'toJSON'>;

export default function useResizeObserver(): Array<any> {
  const ref = useRef<any>(null);
  const [rect, setRect] = useState<ObserverRect>();

  useEffect(() => {
    const observer = new ResizeObserver(() => {
      if (ref.current) {
        const boundingRect = ref.current.getBoundingClientRect();
        setRect(boundingRect);
      }
    });
    observer.observe(ref.current);

    return () => observer.disconnect();
  }, [ref]);

  return [ref, rect];
}

它是如何运作的

useResizeObserver 挂钩利用 ResizeObserver API 来跟踪 DOM 元素的大小变化。它返回一个附加到目标元素的引用以及该元素的当前边界客户端矩形。

用法示例

以下是如何在功能组件中使用 useResizeObserver 挂钩的示例：

import React from 'react';
import useResizeObserver from './useResizeObserver';

function ExampleComponent() {
  const [ref, rect] = useResizeObserver();

  return (
    <>
       <textarea ref={ref} style={{ resize: 'both', height: 100, width: 300 }}>
           Resize this element to see the changes:
       </textarea>

      {rect && (
        <div>
          <p>Top: {rect.top}</p>
          <p>Left: {rect.left}</p>
          <p>Width: {rect.width}</p>
          <p>Height: {rect.height}</p>
        </div>
      )}
    </>
  );
}

export default ExampleComponent;

在此示例中，文本区域元素的大小可调整。 useResizeObserver 钩子跟踪其尺寸，这些尺寸显示在文本区域之外。

关于反应辅助钩子

useResizeObserver 钩子是我的 React 库，react-helper-hooks 的一部分。该库包含一系列自定义挂钩，旨在节省开发人员的时间和精力。像 useResizeObserver 这样的 Hook 为 React 应用程序中的常见任务提供了可重用、高效的解决方案。

随时查看库并贡献或建议新的钩子！

---

如果您需要任何更改或其他信息，请告诉我！

---

在 X ( Twitter ) 上关注我 - https://twitter.com/punitsonime
让我们通过链接进行联系 - https://www.linkedin.com/in/punitsonime/

以上是自定义 React Hook：useResizeObserver的详细内容。更多信息请关注PHP中文网其他相关文章！