useElementBounding

追踪 HTML 元素边界框的 React Hook

Usage

即時編輯器

function Demo() {
  const ref = useRef<HTMLTextAreaElement>(null);
  const rect = useElementBounding(ref);
  return (
    <div>
      <p>調整方框大小以查看變化</p>
      <textarea ref={ref} readOnly value={JSON.stringify(rect, null, 2)} />
    </div>
  );
};

結果

調整方框大小以查看變化

{ "height": 36, "bottom": 799.125, "left": 332, "right": 514, "top": 763.125, "width": 182, "x": 332, "y": 763.125 }

API

useElementBounding

Returns

UseElementBoundingReturn

Arguments

參數名	描述	類型	預設值
target	目标元素	BasicTarget<Element> (必填)	-
options	可选参数	UseElementBoundingOptions | undefined	-

UseElementBoundingOptions

參數名	描述	類型	預設值
reset	将数值重置为0	boolean	true
windowResize	是否监听 resize 事件	boolean	true
windowScroll	是否监听 scroll 事件	boolean	true
immediate	立即更新	boolean	-

UseElementBoundingReturn

參數名	描述	類型	預設值
height	元素的高度	number (必填)	-
bottom	元素的底部位置	number (必填)	-
left	元素的左侧位置	number (必填)	-
right	元素的右侧位置	number (必填)	-
top	元素的顶部位置	number (必填)	-
width	元素的宽度	number (必填)	-
x	元素的 X 位置	number (必填)	-
y	元素的 Y 位置	number (必填)	-
update	手动更新	() => void (必填)	-

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;