feat: export useResizeObserver hooks

[zombieJ]

Summary by CodeRabbit

• 新功能

  • 新增并导出 useResizeObserver 钩子，提供同步与延迟的元素尺寸回调。

• 改进

  • SingleObserver 优化：改为使用钩子驱动的观察机制，新增 onResize 与 data 属性，保持对子节点 ref 转发与渲染行为兼容，提升性能与稳定性。

• 事务

  • 开发依赖版本调整与 ESLint 引入（仅构建/开发相关）。

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
resize-observer	Ready	Preview, Comment	Jan 15, 2026 6:46am

[coderabbitai]

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Walkthrough

引入新的 useResizeObserver Hook 并将 SingleObserver 的内部尺寸监听逻辑委托给该 Hook，新增 onResize 与 data 两个 prop，导出 useResizeObserver 为公共 API，同时更新 package.json 开发依赖版本。

Changes

Cohort / File(s)	变更摘要
新增 Hook \src/useResizeObserver.ts``	新增 useResizeObserver Hook：参数为 enabled, getTarget, onDelayResize, onSyncResize，通过 ResizeObserver 监听并提供同步(onSync)与异步(onDelay)回调，维护内部 sizeRef 并处理 offset/rect 差异。
SingleObserver 适配 \src/SingleObserver/index.tsx``	移除组件内部手动 resize/observer 状态与逻辑，改用 useResizeObserver，新增 onResize 和 data 到 SingleObserverProps，保留 ref 转发与渲染契约。
公共导出 \src/index.tsx``	新增导出：export { default as useResizeObserver } from './useResizeObserver'，将 Hook 作为公共 API 导出。
开发依赖调整 \package.json``	升级/添加开发依赖（@umijs/fabric 升级，新增 eslint），仅 devDeps/格式调整。

Sequence Diagram(s)

sequenceDiagram
    participant Comp as SingleObserver Component
    participant Hook as useResizeObserver
    participant RO as ResizeObserver
    participant DOM as Target Element
    participant MQ as Microtask Queue

    Comp->>Hook: 调用(enabled, getTarget, onSync, onDelay)
    Hook->>DOM: getTarget() 获取目标元素
    Hook->>RO: observe(target)
    DOM->>RO: 尺寸变化触发
    RO->>Hook: 触发回调 onInternalResize
    Hook->>DOM: 读取 getBoundingClientRect / offsetWidth/Height
    Hook->>Hook: 更新 sizeRef
    Hook->>Comp: 调用 onSyncResize(sizeInfo, target)
    Hook->>MQ: Promise.resolve().then(() => onDelayResize(...))
    MQ->>Comp: 调用 onDelayResize(sizeInfo, target)
    Comp->>Hook: 卸载或禁用
    Hook->>RO: unobserve(target)

Loading

Estimated code review effort

🎯 3 (中等) | ⏱️ ~20 分钟

Possibly related PRs

• feat: Remove findDOMNode #216 — 修改了 SingleObserver 的 DOM 获取与 ref 处理，代码层面与本次对接 ref/DOM 的改动高度相关。
• chore: rm resize-observer-polyfill #218 — 调整 observe/unobserve 和 ResizeObserver 初始化逻辑，可能与新 Hook 的注册/清理行为相关。

Suggested reviewers

• Wxh16144

诗歌

🐰
我在草丛里听见尺寸的歌，
Hook 把波动轻轻收下，
同步一声，微任务默数，
观察者舞步悄然不惊，
代码里春风又回家。 🥕✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title accurately summarizes the main change: exporting a new useResizeObserver hook as a public API.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch hooks

---

🧹 Recent nitpick comments

src/useResizeObserver.ts (1)

6-11: 考虑为公共 API 提供返回值。

作为即将公开导出的 hook，当前没有返回值。消费者只能通过回调获取尺寸信息。如果消费者需要在渲染时访问当前尺寸（而非仅响应变化），可能需要自行维护状态。

可以考虑返回当前尺寸信息供消费者使用：

// 可选增强
return sizeRef.current;
// 或返回更多控制能力
return { size: sizeRef.current };

这是一个可选优化，取决于预期的 API 使用场景。

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1614b4a and 479bc86.

📒 Files selected for processing (3)

• package.json
• src/SingleObserver/index.tsx
• src/useResizeObserver.ts

🧰 Additional context used

🧠 Learnings (2)

📓 Common learnings

Learnt from: robertpanvip
Repo: react-component/resize-observer PR: 215
File: src/SingleObserver/Ref.tsx:47-62
Timestamp: 2024-12-19T07:27:01.577Z
Learning: 在 Ref.tsx 中的 MutationObserver 回调中，仅关心节点的增删（removedNodes 和 addedNodes），不处理属性变化。

📚 Learning: 2024-12-19T07:27:01.577Z

Learnt from: robertpanvip
Repo: react-component/resize-observer PR: 215
File: src/SingleObserver/Ref.tsx:47-62
Timestamp: 2024-12-19T07:27:01.577Z
Learning: 在 Ref.tsx 中的 MutationObserver 回调中，仅关心节点的增删（removedNodes 和 addedNodes），不处理属性变化。

Applied to files:

• src/useResizeObserver.ts
• src/SingleObserver/index.tsx

🧬 Code graph analysis (2)

src/useResizeObserver.ts (3)

src/index.tsx (2)

• OnResize (24-24)
• SizeInfo (17-22)

tests/setup.js (1)

• target (12-12)

src/utils/observerUtil.ts (2)

• observe (28-35)
• unobserve (37-45)

src/SingleObserver/index.tsx (2)

src/index.tsx (1)

• ResizeObserverProps (26-33)

src/useResizeObserver.ts (1)

• useResizeObserver (6-79)

🔇 Additional comments (5)

src/SingleObserver/index.tsx (1)

40-45: 渲染逻辑简洁清晰。

条件渲染逻辑正确处理了支持 ref 和不支持 ref 的子组件情况。

src/useResizeObserver.ts (2)

23-63: resize 处理逻辑实现正确。

• 使用 useEvent 确保回调引用稳定
• 变更检测逻辑完整，比较所有 4 个维度值避免重复触发
• 同步 + 微任务延迟的双回调设计为调用方提供了灵活性

---

12-18: 初始化值设计合理。

使用 -1 作为初始值确保首次测量一定会触发回调（真实尺寸始终 >= 0），这是正确的设计。

package.json (2)

54-54: @umijs/fabric 升级至 v4.0.0 的配置已正确集成。

.eslintrc.js 已正确扩展 @umijs/fabric v4 的 ESLint 配置，且 ESLint 8.x 与该版本兼容。项目中存在的自定义规则覆盖表明任何主版本升级引起的破坏性变更已被识别并处理（参见最近的"fix lint"提交）。

---

72-72: @umijs/fabric v4 没有 peerDependencies 要求，对 eslint 版本没有限制。eslint "8.x" 版本范围完全兼容。

Likely an incorrect or invalid review comment.

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[gemini-code-assist]

Summary of Changes

Hello @zombieJ, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request extracts the resize observation logic into a new, reusable useResizeObserver React hook. This change centralizes the resize monitoring functionality, improving modularity and allowing other components to easily integrate resize observation without duplicating code. The SingleObserver component has been updated to consume this new hook, streamlining its implementation.

Highlights

• New useResizeObserver Hook: A dedicated React hook has been introduced to encapsulate the logic for observing element resize events, promoting reusability and cleaner component code.
• SingleObserver Refactoring: The SingleObserver component has been refactored to utilize the newly created useResizeObserver hook, removing its internal, duplicated resize observation implementation.
• Exported Hook: The useResizeObserver hook is now exported from the main index.tsx file, making it available for external use by other components or libraries.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a useResizeObserver hook to encapsulate the resize observation logic, which is a great refactoring. However, the current API design of the new hook has a potential flaw related to its dependency on a getTarget function, which can lead to performance issues or bugs. I've provided suggestions to change the hook's signature to accept the target element directly, which makes it more robust and aligned with React's hook patterns. The corresponding changes in SingleObserver are also suggested.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 94.07%. Comparing base (709f18d) to head (479bc86).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #224   +/-   ##
=======================================
  Coverage   94.07%   94.07%           
=======================================
  Files           5        6    +1     
  Lines         135      135           
  Branches       38       38           
=======================================
  Hits          127      127           
  Misses          7        7           
  Partials        1        1           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	eslint@​7.32.0 ⏵ 8.57.1	+1		+1
	@​umijs/​fabric@​2.14.1 ⏵ 4.0.1			+1

View full report