useElementSize 钩子

useElementSize 是一个能动态跟踪 HTML 元素维度的回放钩。 它更新了元素的宽度和高度,以应对窗口的再大小,元素的安装/卸载,并调整变化.

特征

• 动态维度跟踪 : 自动跟踪和更新指定元素的宽度和高度.
• 对环境变化的反应: 响应窗口调整大小并调整变化,确保精确的大小测量.
• 安保部门安全: 与服务器侧渲染兼容,避免在不带设备的环境中出错 window 对象.
• 优化精确度 : 用途 useLayoutEffect 用于DOM变异后的精确维度测量.

安装

选择并安装适合您项目需要的单个钩子, 或安装整个收藏, 用于全套公用事业 .

只安装当前钩

npm install @custom-react-hooks/use-element-size

或者说

yarn add @custom-react-hooks/use-element-size

安装全部钩

npm install @custom-react-hooks/all

或者说

yarn add @custom-react-hooks/all

导入虎克

这个 useElementSize 钩必须使用下列命名的导入方式导入:

已命名的导入 :

import { useElementSize } from '@custom-react-hooks/use-element-size';

这种方法确保了钩子无缝地融入到您的项目中,在您如何使用我们的包时保持一致性和可预测性.

使用量

import React, { useRef, useState } from 'react';
import { useElementSize } from '@custom-react-hooks/all';

const ElementSizeComponent = () => {
  const [setRef, size] = useElementSize();

  return (
    <div className="element-size">
      <div
        ref={setRef}
        className="resize"
      >
        <p>Drag from the bottom-right corner to resize.</p>
      </div>
      <br />
      <div>Current Size:</div>
      <div className="btns">
        <p>
          Width: <span>{size.width}px</span>
        </p>
        <p>
          Height: <span>{size.height}px</span>
        </p>
      </div>
    </div>
  );
};

export default ElementSizeComponent;

在这个例子中, useElementSize 用于测量和显示一个 div 键.

API 参考

参数

• ref: 附加在您想要测量大小的元素上的反射对象.

返回对象

• width: 元素的宽度
• height: 元素的高度.

使用大小写

• 响应组件: 根据其大小调整组件行为或样式.
• 版式计算: 计算取决于元素大小的网格或泥瓦布局等项目的布局.
• 大小依赖渲染: 根据可用大小渲染出不同的内容或组件.
• 动画和过渡: 当元素大小变化时触发动画或过渡.
• 优化 Canvas 或 SVG: 根据其容器大小调整画布或SVG元素的尺寸.

捐款

你对改进的贡献 useElementSize 欢迎光临。 请随意向存储处提交问题或调取请求.