useElementSize

追踪 HTML 元素大小的React Hook. ResizeObserver MDN

useElementSize 使用 ResizeObserver API 实时跟踪 DOM 元素的宽度和高度。它返回当前的 width 和 height 作为响应式元组，在元素调整大小时更新。传入目标元素的 ref 和可选的 ResizeObserverOptions（例如 { box: "border-box" }）控制观察的盒模型。

使用场景

• 构建根据自身大小而非视口大小进行适配的响应式组件
• 在不支持原生容器查询的旧浏览器中实现容器查询
• 动态调整 canvas 元素、图表或虚拟列表的大小

注意事项

• SSR 安全：在服务端渲染期间返回 [0, 0]。观察在挂载后开始。
• 性能：使用 ResizeObserver，比轮询或监听窗口 resize 事件更高效。观察器在卸载时自动断开。
• 参见 useMeasure 了解返回完整 DOMRect 的类似 hook，useElementBounding 了解通过 getBoundingClientRect 获取位置和大小，以及 useWindowSize 了解视口尺寸。

Usage

function Demo() {
  const ref = useRef<HTMLTextAreaElement>(null);

  const [width, height] = useElementSize(ref, { box: "border-box" });

  return (
    <div>
      <div>调整框的大小以查看变化</div>
      <br />
      <textarea
        ref={ref}
        disabled
        style={{ width: 200, height: 200 }}
        value={`宽度: ${width}\n高度: ${height}`}
      />
    </div>
  );
};

API

useElementSize

Returns

readonly [number, number]: 包含以下元素的元组：

• 元素宽度。
• 元素高度。

Arguments

BasicTarget

export type BasicTarget<T extends TargetType = Element> = (() => TargetValue<T>) | TargetValue<T> | MutableRefObject<TargetValue<T>>;

TargetValue

type TargetValue<T> = T | undefined | null;

TargetType

type TargetType = HTMLElement | Element | Window | Document | EventTarget;