rc-align

rc-align is a small, focused React component that keeps a child element visually aligned to a target — another DOM node, the window, or an explicit page/client point. It wraps the battle-tested dom-align engine with a declarative React API, so instead of imperatively measuring and positioning elements you describe the alignment configuration and let the component handle mount-time positioning and realignment.

It automatically realigns when the alignment config changes and can monitor window resize and scroll, making it a reliable primitive for building tooltips, dropdowns, popovers, and other overlays. rc-align is a core building block of the react-component ecosystem that powers Ant Design’s positioning layer.

What You Get

• A declarative <Align> component that positions its child against a target node, the window, or a page/client point
• Automatic realignment when the align config changes, with optional monitoring of window resize and scroll
• The full expressiveness of dom-align’s alignment configuration (points, offsets, overflow adjustment)
• An onAlign callback that fires with the source element and resolved alignment for advanced coordination
• A tiny, dependency-light primitive suitable for building tooltips, dropdowns, and popovers

Common Use Cases

• Positioning tooltip and popover content next to a trigger element
• Anchoring dropdown menus and select panels below or beside their controls
• Placing context menus at a click point using pageX/pageY or clientX/clientY targets
• Building custom overlay components that must stay aligned as the viewport changes

Under The Hood

Architecture - The public component lives in src/Align.tsx and forwards a ref-wrapped single child, resolving the target via a function/point and invoking the underlying dom-align on the source and target elements. A buffering hook in src/hooks/useBuffer.tsx debounces repeated alignment requests so bursts of resize/scroll events collapse into a controlled number of realigns, and src/util.ts wires ResizeObserver (via resize-observer-polyfill) to trigger realignment. src/interface.ts defines the alignment and target typings.

Tech Stack - Written in TypeScript and published as both CommonJS (lib) and ES modules (es). Runtime dependencies are dom-align (the positioning math), rc-util for shared React helpers, classnames, resize-observer-polyfill, and @babel/runtime. Built with the react-component father toolchain.

Code Quality - The repo carries a focused Jest test suite under tests/ covering element targets, point targets, strict-mode behaviour, and utilities, with coverage tracked on Codecov and CI on GitHub Actions. The TypeScript typings and small surface keep the code approachable, and the useBuffer hook shows deliberate attention to performance under frequent realign triggers.

API Design - The API is intentionally minimal: props are align, target, onAlign, and monitorWindowResize, matching dom-align’s well-documented config so existing knowledge transfers directly. Because it renders exactly one child and positions it, it composes cleanly into higher-level overlay components without imposing styling or structure of its own.