useMergedRef

import { useRef } from "react";
import { mergeRefs } from "@/hooks/use-merged-ref";
 
export const MyComponent = React.forwardRef<React.ElementRef<"div">, React.ComponentPropsWithoutRef<"div">>(({ ...props }, ref) => {
  const myRef = useRef();
 
  return <div ref={mergeRefs(myRef, ref)} {...props} />;
});
MyComponent.displayName = "MyComponent";

import { createRefs } from "@/hooks/use-merged-ref";
 
export enum Structure {
  Root = "root",
  Wrap = "wrap",
  Inner = "inner",
}
 
export function MyComponent() {
  const refs = createRefs<HTMLDivElement, `${Structure}`>(Object.values(Structure));
 
  // ...more actions for each ref
 
  return (
    <div ref={refs.root}>
      <div ref={refs.wrap}>
        <div ref={refs.inner}>inner<div/>
        <div ref={refs.inner}>inner<div/>
      </div>
 
      <div ref={refs.wrap}>
        <div ref={refs.inner}>inner<div/>
        <div ref={refs.inner}>inner<div/>
      </div>
    </div>
  )
}

import { useRef } from "react";
import { useHover, useMergedRef, useMove } from "@/hooks";
 
export function MyComponent() {
  const myRef = useRef();
  const { ref: moveRef } = useMove<HTMLDivElement>();
  const { ref: hoverRef } = useHover<HTMLDivElement>();
 
  const mergedRef = useMergedRef(myRef, moveRef, hoverRef);
 
  return <div ref={mergedRef} />;
}