useElementSize

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

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>
  );
};

結果

調整方框大小以查看變化

寬度: 200 高度: 200

API

useElementSize

Returns

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

• 元素寬度。
• 元素高度。

Arguments

參數名	描述	類型	預設值
target	dom对象	BasicTarget<Element> (必填)	-
options	resizeObserver 参数	ResizeObserverOptions | undefined	-

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;