Create new hook for combining refs (#1683)

Author: ethanshar

generatedTypes/src/hooks/index.d.ts

@@ -1,3 +1,4 @@
+export { default as useCombinedRefs } from './useCombinedRefs';
 export { default as useToggleValue } from './useToggleValue';
 export { default as useDidUpdate } from './useDidUpdate';
 export { default as useOrientation } from './useOrientation';

generatedTypes/src/hooks/useCombinedRefs/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const useCombinedRefs: (...refs: React.Ref<any>[]) => React.MutableRefObject<undefined>;
+export default useCombinedRefs;

src/hooks/index.ts

@@ -1,3 +1,4 @@
+export {default as useCombinedRefs} from './useCombinedRefs';
 export {default as useToggleValue} from './useToggleValue';
 export {default as useDidUpdate} from './useDidUpdate';
 export {default as useOrientation} from './useOrientation';

src/hooks/useCombinedRefs/index.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const useCombinedRefs = (...refs: React.Ref<any>[]) => {
+  const targetRef = React.useRef();
+
+  React.useEffect(() => {
+    refs.forEach(ref => {
+      if (!ref) {
+        return;
+      }
+
+      if (typeof ref === 'function') {
+        ref(targetRef.current);
+      } else {
+        // @ts-expect-error
+        ref.current = targetRef.current;
+      }
+    });
+  }, [refs]);
+
+  return targetRef;
+};
+
+export default useCombinedRefs;