Docs
useMergeRefs
Merge multiple refs into a single ref callback.
0/30
Installation
pnpm dlx shadcn@latest add https://usekit.kiron.dev/k/use-merge-refs
Usage
"use client"
import * as React from "react"
import { useMergeRefs } from "@/hooks/use-merge-refs"
export function Component() {
const ref1 = useRef<HTMLDivElement>(null)
const ref2 = useRef<HTMLDivElement>(null)
const mergedRef = useMergeRefs(ref1, ref2, (el) => {
if (el) {
console.log("Callback ref triggered with:", el)
}
})
return <div ref={mergedRef}>Merged Refs Div</div>
}
API Reference
Parameters
Name | Type | Description | Default Value | Optional |
---|---|---|---|---|
refs | Ref[] | An array of refs to merge. | - | No |
Return Values
Name | Type | Description |
---|---|---|
mergedRef | RefCallback | A callback ref that merges all provided refs. |