Install with shadcn
Experimental compatibility. This installs the real Astryx package and creates a local public re-export; it does not copy component implementation source. How compatibility works.
This install URL expires with the draft preview.bashnpx shadcn@latest add https://astryx-2z5i6c2u1-fbopensource.vercel.app/r/astryx-component-use-merged-refs.json
Usage
Combines multiple object or callback refs into one stable callback ref. Use it when a component must forward a consumer ref while also attaching internal refs. Unlike calling mergeRefs during render, the callback identity stays stable across unrelated rerenders, so React does not detach and reattach the element.
tsimport {useMergedRefs} from '@astryxdesign/core/hooks'
Best practices
| Guidance | Practices |
|---|---|
| Do | Use useMergedRefs when one element must receive both a forwarded ref and one or more internal refs. |
| Don't | Call mergeRefs directly in a JSX ref prop; that creates a new callback on every render and forces unnecessary detach and attach work. |
Parameters
| Param | Type | Description |
|---|---|---|
refsrequired | Array<Ref<T> | undefined> | Up to six refs that should all receive the same element. |
Returns
| Field | Type | Description |
|---|---|---|
| ref | RefCallback<T> | A merged callback ref that remains stable until an input ref changes. |