Merge pull request #9 from lovrozagar/use-merged-ref

useMergedRef

src/packages/hooks/shared/package.json

@@ -42,5 +42,5 @@
   "sideEffects": false,
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "1.0.0"
+  "version": "1.0.1"
 }

src/packages/hooks/shared/src/index.ts

@@ -1,4 +1,5 @@
 export { useFreshRef, type UseFreshRefReturn } from "./use-fresh-ref/use-fresh-ref"
+export { useMergedRef } from "./use-merged-ref/use-merged-ref"
 export {
   useMutationObserver,
   type UseMutationObserverProps,

src/packages/hooks/shared/src/use-merged-ref/handle-ref.ts

@@ -0,0 +1,16 @@
+import type { Ref } from "react"
+
+function handleRef<T extends Element>(element: T | null, ref: Ref<T> | undefined | null) {
+  if (!element || !ref) return
+
+  if (typeof ref === "function") {
+    ref(element)
+
+    return
+  }
+  /* @TODO change when React 19 released */
+  /* @ts-ignore */
+  ;(ref as RefObject<T>).current = element
+}
+
+export { handleRef }

src/packages/hooks/shared/src/use-merged-ref/merge-refs.ts

@@ -0,0 +1,12 @@
+import type { Ref } from "react"
+import { handleRef } from "./handle-ref"
+
+function mergeRefs<T extends Element>(element: T | null, refs: Array<Ref<T> | undefined | null>) {
+  if (!refs) return
+
+  refs.filter(Boolean).forEach((ref) => {
+    handleRef(element, ref)
+  })
+}
+
+export { mergeRefs }

src/packages/hooks/shared/src/use-merged-ref/use-merged-ref.ts

@@ -0,0 +1,15 @@
+"use client"
+
+import { type Ref, useCallback } from "react"
+import { mergeRefs } from "./merge-refs"
+
+function useMergedRef<T extends Element>(refs: Array<Ref<T> | undefined | null>) {
+  return useCallback(
+    (element: T) => {
+      mergeRefs(element, refs)
+    },
+    [refs],
+  )
+}
+
+export { useMergedRef }