# @cutting/use-get-parent-size 中文文档

规范地址：https://npmcn.com/package/%40cutting/use-get-parent-size/

版本：2\.15\.1
npm 元数据更新时间：2026-10-27T10:32:23.407Z
中文译文更新时间：2026-11-11T07:54:29.827Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40cutting/use-get-parent-size
原文对照：https://npmcn.com/package/%40cutting/use-get-parent-size/?lang=original
源码仓库：https://github.com/dagda1/cuttingedge

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：13.7 kB，6 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react 19\.3\.1，three 0\.186\.1，react-dom 19\.3\.1，react-router 8\.5\.0，use-debounce 10\.1\.1
- 首次发布：2021-05-31T08:47:15.513Z
- 最新版本发布：2026-10-27T10:32:22.985Z
- 近 30 天下载量：2708（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：96（近 12 个月 12 个）

## 中文简介

从一个被观测到的 DOM 元素的高度,宽度等大小观测器中获取调整大小的事件 .

## 安装

```sh
npm install @cutting/use-get-parent-size
```

也可以使用：`pnpm add @cutting/use-get-parent-size`、`yarn add @cutting/use-get-parent-size`、`bun add @cutting/use-get-parent-size`

## README

# @ 剪切/ use- get- parent- small -- 从一个缩放的观测器上调整所观察到的 DOM 元素的高度、 宽度等的大小 .

[![npm version](https://img.shields.io/npm/v/@cutting/use-get-parent-size.svg)](https://www.npmjs.com/package/@cutting/use-get-parent-size) [![code style: oxfmt](https://img.shields.io/badge/code_style-oxfmt-ff69b4.svg)](https://oxc.rs/docs/guide/usage/formatter)

## 安装

```sh
pnpm add @cutting/use-get-parent-size

# or

npm install @cutting/use-get-parent-size
```

## 使用亲子关系

一个反应钩子,允许您使用一个缩放观察员来测量元素大小.

### 使用量

```ts
const { width, height } = useParentSize(ref, options);
```

`useParentSize` 进行反应 [参考对象](https://reactjs.org/docs/refs-and-the-dom.html) 和可选 `options` 对象.

返回所观察到元素的内容矩形 :

```ts
interface DOMRectReadOnly {
  readonly bottom: number;
  readonly height: number;
  readonly left: number;
  readonly right: number;
  readonly top: number;
  readonly width: number;
  readonly x: number;
  readonly y: number;
  toJSON(): any;
}
```

### 选项

```ts
export interface UseParentSizeOptions {
  debounceDelay: number;
  initialValues: Partial<ResizeObserverContentRect>;
  transformFunc?: (entry: Partial<ResizeObserverContentRect>) => Partial<ResizeObserverContentRect>;
  maxDifference?: number;
  transformFunc?: ({ width, height }: Dimensions) => Dimensions;
  callback?(entry: ResizeObserverContentRect): void;
}
```

-   `debounceDelay` - 默认500毫秒可选 `number` 它将拖动将事件重新分解到调用码的速度.
-   `initialValues` - 起初 `ref` 将会是 `null` 没有 `width` 或者说 `height` 值可以返回到挂起为止。 这个 `initialValues` 选项可以返回特定的 `width` 财务报告和审定财务报表 `height` 数值直到 `ref` 实际引用有效的 DOM 节点。 譬如说. `const { width, height } = useParentSize(ref, { width: 100, height: 50})`· ;

默认为空 Domrect :

```js
{
 bottom: undefined,
 height: undefined,
 left: undefined,
 width: undefined,
 right: undefined,
 top: undefined,
 x: undefined,
 y: undefined,
};
```

-   `transformFunc` 可选函数可转换结果,例如将母体的大小减半
    
    ```ts
    transformFunc: ({ width, height }) => ({
      width: width / 2,
      height: height / 2,
    });
    ```
    
    默认是身份, `(x) => x`
    
-   `maxDifference` (default 10) - 使用 ParrentSize 将当前 Domrect 值存储在内存中,如果事件发生器的大小调整,这些值会在调整后与新的 Domrect 值相核对. 如果两个值的相差大于 `maxDifference` 然后通知客户端.
    
-   `callback` 可以提供每次调整大小时执行的函数.
    

## 使用量

### 用于正确调整 svg 大小

```ts
import { useRef } from 'react';
import type { UseParentSizeOptions } from '@cutting/use-get-parent-size';

export function ResponsiveSVG({
  children
}): JSX.Element => {
  const ref = useRef<HTMLDivElement>(null);
  const { width, height } = useParentSize(ref, options);
  const aspect = width / height;

  const adjustedHeight = Math.ceil(width / aspect);

  return (
    <div ref={ref}>
      <svg
        viewBox={`${origin.x} ${origin.y} ${width} ${adjustedHeight}`}
      >
        {children}
      </svg>
    </div>
  );
};
```

### 只使用回调

```ts
const Pipeline = () => {
  const controller = useVisualizationController();
  const containerRef = useRef<HTMLDivElement>(null);

  useParentSize(containerRef, {
    callback: () => {
      controller.getGraph().fit(70);
    },
    debounceDelay: 500,
  });
```

## 常见问题

### @cutting/use-get-parent-size 是什么？

从一个被观测到的 DOM 元素的高度,宽度等大小观测器中获取调整大小的事件 \.

### 如何安装 @cutting/use-get-parent-size？

在项目目录运行 npm install @cutting/use-get-parent-size，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（19\.3\.1）、three（0\.186\.1）、react-dom（19\.3\.1）、react-router（8\.5\.0）、use-debounce（10\.1\.1）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @cutting/use-get-parent-size 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @cutting/use-get-parent-size 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @cutting/use-get-parent-size 可以商用吗？

@cutting/use-get-parent-size 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @cutting/use-get-parent-size 的下载量有多少？

根据 npm 官方下载统计，@cutting/use-get-parent-size 在 2026/10/11 – 2026/11/09 这 30 天内被下载 2,708 次，日均约 90 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @cutting/use-get-parent-size 还在维护吗？

最新版本 2\.15\.1 发布于 2026/10/27（14 天前）；至今共发布 96 个版本，其中过去 12 个月发布了 12 个；首次发布于 2021/05/31。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。