@rc-component/util is the shared helper layer under Ant Design's component stack

A support package for the rc-component family

@rc-component/util is the shared utility layer for rc-component packages, and the project description says so plainly: shared React utilities for rc-component packages. It is not a component library you import into your app. It is the place where the low level helpers live so that a dozen separate component libraries do not each ship their own copy of the same code. The package is built for React, maintained by the rc-component team, and used by Ant Design and other React component libraries. The repository is written in TypeScript and the homepage sits at react-component.github.io/util, with the docs site generated by dumi. The scope of the API is deliberately narrow. The project describes it as small, focused helpers used across rc-component and Ant Design packages, and asks that you import the public entry when possible, using subpath imports only for specialised DOM, React or test helpers.

The package changed its name and kept the old one working

The naming history is the first thing to sort out when you meet this package. The project documentation states that this package was historically published as `rc-util` and advises preferring the scoped package for new code. That is a straightforward migration decision on the surface, but it has a practical consequence for dependency graphs. A tree that still resolves `rc-util` and one that resolves `@rc-component/util` are two different packages with two different version lines, and an application that mixes them can end up with two copies of the same helper in the bundle. The npm package name is `@rc-component/util` and the version in the repository's package.json is 1.14.0, so the scoped line is a mature 1.x rather than a fresh rewrite. The topics attached to the repository, including ant-design and antd, are a reminder that this sits inside the Ant Design ecosystem rather than beside it.

Installing and importing the public entry

Installation is a single npm command, and the usage example imports named exports from the package root:

npm install @rc-component/util

import {
  Portal,
  raf,
  useEvent,
  useLayoutEffect,
  warning,
} from '@rc-component/util';

The public entry covers the most common helpers, and the README asks that you import from it when possible. The rest is reached through subpaths, grouped by area. React hooks include `useEvent`, `useLayoutEffect`, `useMergedState` and `useState` helpers. React utilities include `Children/toArray`, `composeRef`, `pickAttrs` and `Portal`. DOM utilities include `Dom/canUseDom`, `Dom/contains`, `Dom/dynamicCSS`, `Dom/focus` and `getScrollBarSize`. Async helpers are `raf` and `raf.cancel`, and the warning helpers are `warning`, `noteOnce` and `resetWarned`. For tests there is `test/domHook` for DOM prototype spies. Examples for the commonly used subpath helpers live in `docs/examples`.

Two module formats come out of one father build

The packaging decisions are visible in package.json rather than buried in prose, and they matter for bundler configuration. The package sets `main` to `./lib/index` and `module` to `./es/index`, and the published `files` array contains only `lib` and `es`. In other words, consumers get a CommonJS entry and an ES module entry, and nothing else is shipped, so a tree-shaking setup reads the `es` path while a CommonJS consumer falls back to `lib`. TypeScript declarations ship alongside both outputs alongside both outputs. The build itself is driven by father, with the `compile` script running `father build` and the top-level `build` script running the compile step and then the docs build. The package has only two runtime dependencies, `is-mobile` and `react-is`, which is a small surface for a utility package that many libraries will end up bundling.

The docs site is a dumi app you can run locally

The examples are not hosted somewhere separate from the code. The repository ships a dumi setup, configured through `.dumirc.ts`, with the docs sources under `docs/` and example code under `docs/examples`. Running the local site takes two commands:

npm install
npm start

After that the site is served at `http://localhost:8000`, which the README gives explicitly, and the same address is noted for the dumi site in the development section. The full development loop adds `npm test`, which runs `rc-test`, and `npm run build`. There is also a `tsc` script that runs the TypeScript compiler with `--noEmit`, which is the fastest way to check whether a change type-checks without producing output. The project notes that examples, tests and preview builds are kept aligned with the package source, which matters for a package whose whole purpose is to be a dependable shared base.

Publishing runs through rc-np after the build

The release flow is short and defined by one script. `npm run prepublishOnly` runs the compile step and then `rc-np`, and the README explains that the release is handled by `@rc-component/np` through the `rc-np` command after the package build. The version history shows a steady line of scoped releases: 1.12.0 on 2026-07-13, 1.13.0 on 2026-09-01 and 1.14.0 on 2026-10-13, with the last push to the repository on 2026-10-13. The licence is MIT, and the README points at the LICENSE file in the repository root. For an organisation using this package, the licence is the easy part: the harder question is ecosystem coupling, since the helpers are tuned for the way the rc-component and Ant Design packages behave, and adopting them ties your component code to that family's assumptions about rendering, refs and warnings.

Editorial conclusion

Teams building component libraries in the rc-component ecosystem, or an application that already depends on Ant Design, get a maintained set of hooks and DOM helpers from one place with a MIT licence and typed builds. It is the wrong choice for a product that wants no dependency on the Ant Design ecosystem, and the wrong choice if you only need one small helper, since a single `useEvent` or `raf` import is easy to own yourself. Before adopting it, check whether your other dependencies already pull in `rc-util` or the scoped package, and read HISTORY.md to see how the 1.x line has changed the helper set.

Frequently asked questions

Official sources

1. License: MIT
2. Project website
3. react-component/util on GitHub
4. README
5. Releases