# @asyarb/use-resize-observer 中文文档

规范地址：https://npmcn.com/package/%40asyarb/use-resize-observer/

版本：2\.0\.2
npm 元数据更新时间：2022-04-04T16:00:50.979Z
中文译文更新时间：2026-11-07T01:29:11.561Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40asyarb/use-resize-observer
原文对照：https://npmcn.com/package/%40asyarb/use-resize-observer/?lang=original
项目主页：https://github.com/asyarb/use-resize-observer
源码仓库：https://github.com/asyarb/use-resize-observer

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

- 包体积（解压后）：24.5 kB，14 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react \>=16\.8
- 首次发布：2019-05-09T07:51:44.477Z
- 最新版本发布：2019-09-08T23:57:37.726Z
- 近 30 天下载量：4249（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：14（近 12 个月 0 个）

## 中文简介

易用 React shock 包装器环绕 resign Object API.

## 安装

```sh
npm install @asyarb/use-resize-observer
```

也可以使用：`pnpm add @asyarb/use-resize-observer`、`yarn add @asyarb/use-resize-observer`、`bun add @asyarb/use-resize-observer`

## README

# 用户大小调整观测器

-   [特征](https://npmcn.com/package/%40asyarb/use-resize-observer/#readme-features)
-   [安装](https://npmcn.com/package/%40asyarb/use-resize-observer/#readme-installation)
-   [使用量](https://npmcn.com/package/%40asyarb/use-resize-observer/#readme-usage)
    -   [提供a `ref` 从 `useRef`](https://npmcn.com/package/%40asyarb/use-resize-observer/#readme-provide-a-ref-from-useref)
    -   [提供 DOM 元素](https://npmcn.com/package/%40asyarb/use-resize-observer/#readme-provide-a-dom-element)
    -   [API 密码](https://npmcn.com/package/%40asyarb/use-resize-observer/#readme-api)
-   [许可证](https://npmcn.com/package/%40asyarb/use-resize-observer/#readme-license)

[![NPM](https://img.shields.io/npm/v/@asyarb/use-resize-observer.svg?&color=green)](https://www.npmjs.com/package/@asyarb/use-resize-observer) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/@asyarb/use-resize-observer.svg?logoColor=brightgreen)

《公约》的执行情况 [调整观察员界面的大小](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) 来告诉你元素的大小.

**演示**数字 : [密码沙盒](https://codesandbox.io/s/74n0p5xr0j)

# 特征

-   **钩子** - 通过一个裁判!
-   **备选 API** - 通过一个 `Element` 和处理的可选函数 `ResizeObserver` 召回电话.
-   **类型** - 用 TypeScript 编写 !

> ++ 此软件包包括 [`resize-observer-polyfill`](https://www.npmjs.com/package/resize-observer-polyfill) 用于完整浏览器支持。 这个包装小马桶 `ResizeObserver` 运行时间 基于浏览器.

# 安装

运行如下 :

```bash
# Yarn
yarn add @asyarb/use-resize-observer

# NPM
npm i @asyarb/use-resize-observer --save
```

# 使用量

### 提供a `ref` 从 `useRef`

为观察一个组件的再大小,通过 `ref` 一个组件改为: `useResizeObserver`数字 :

```jsx
const Example = () => {
  const ref = useRef()
  const [height, setHeight] = useState(0)

  // Get the content rect directly from the hook:
  const sizes = useResizeObserver({ ref })

  // Perform any side effect with those sizes!
  useEffect(() => void setHeight(sizes.height), [sizes])

  return <div ref={ref}>Some content...</div>
}
```

`sizes` 当观察到的元素被调整时,将更新.

或者,您可以通过一个函数作为第二个参数执行任何 调整大小的副作用。 此函数收到 `ResizeObserver` 条目 (单位:千美元)`ResizeObserverEntry`)作为参数的对象.

```jsx
const Example = () => {
  const ref = useRef
  const [height, setHeight] = useState(0)

  // Provide an optional callback to perform side effects instead:
  useResizeObserver({
    ref,
    callback: entry => setHeight(entry.contentRect.height),
  })

  return <div ref={ref}>Some content...</div>
}
```

### 提供 DOM 元素

`useResizeObserver` 也可以选择 `HTMLElement` 如回归 值从 `document.querySelector()`。 。 。 .

```jsx
const element = document.querySelector('.someClass')

const Example = () => {
  const [height, setHeight] = useState(0)

  // Pass an HTMLElement directly:
  const sizes = useResizeObserver({ element })

  // Perform any side effect with that element's sizes!
  useEffect(() => void setHeight(sizes.height), [sizes])

  return <div ref={ref}>Some content...</div>
}
```

和前一个例子一样,也可以提供回调功能.

## API 密码

| 参数 | 需求 | 说明 |
| --- | :-: | --- |
| `ref` | 无 | 反应 `ref` 观察. |
| `element` | 没有 | HTML 语言 `Element` 观察。 如果两者兼有 `ref` 财务报告和审定财务报表 `element` 提供, `ref` 优先处理. |
| `callback` | 没有 | 可选的回叫在调整大小时开火。 接收 `ResizeObserverEntry` 将观察到的要素作为论据 |

# 许可证

麻省理工学院.

## 常见问题

### @asyarb/use-resize-observer 是什么？

易用 React shock 包装器环绕 resign Object API\.

### 如何安装 @asyarb/use-resize-observer？

在项目目录运行 npm install @asyarb/use-resize-observer，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16\.8）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @asyarb/use-resize-observer 支持 TypeScript 吗？

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

### @asyarb/use-resize-observer 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @asyarb/use-resize-observer 可以商用吗？

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

### @asyarb/use-resize-observer 的下载量有多少？

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

### @asyarb/use-resize-observer 还在维护吗？

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