robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
samuel.fm
1/**
2 * This TypeScript function merges multiple React refs into a single ref callback.
3 * When developing low level UI components, it is common to have to use a local ref
4 * but also support an external one using React.forwardRef.
5 * Natively, React does not offer a way to set two refs inside the ref property. This is the goal of this small utility.
6 * Today a ref can be a function or an object, tomorrow it could be another thing, who knows.
7 * This utility handles compatibility for you.
8 * This function is inspired by https://github.com/gregberge/react-merge-refs
9 * @param refs - An array of React refs, which can be either `React.MutableRefObject<T>` or
10 * `React.LegacyRef<T>`. These refs are used to store references to DOM elements or React components.
11 * The `mergeRefs` function takes in an array of these refs and returns a callback function that
12 * @returns The function `mergeRefs` is being returned. It takes an array of mutable or legacy refs and
13 * returns a ref callback function that can be used to merge multiple refs into a single ref.
14 */
15export function mergeRefs<T = any>(
16 refs: Array<React.MutableRefObject<T> | React.Ref<T>>,
17): React.RefCallback<T> {
18 return value => {
19 refs.forEach(ref => {
20 if (typeof ref === 'function') {
21 ref(value)
22 } else if (ref != null) {
23 ;(ref as React.MutableRefObject<T | null>).current = value
24 }
25 })
26 }
27}