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

NameTypeDescriptionDefault ValueOptional
refsRef[]An array of refs to merge.-No

Return Values

NameTypeDescription
mergedRefRefCallbackA callback ref that merges all provided refs.