feat: getNodeRef (#545)

Author: zombieJ

src/ref.ts

@@ -1,5 +1,5 @@
 import type * as React from 'react';
-import { isValidElement } from 'react';
+import { isValidElement, version } from 'react';
 import { ForwardRef, isFragment, isMemo } from 'react-is';
 import useMemo from './hooks/useMemo';
 
@@ -64,14 +64,36 @@ interface RefAttributes<T> extends React.Attributes {
   ref: React.Ref<T>;
 }
 
+function isReactElement(node: React.ReactNode) {
+  return isValidElement(node) && !isFragment(node);
+}
+
 export const supportNodeRef = <T = any>(
   node: React.ReactNode,
 ): node is React.ReactElement & RefAttributes<T> => {
-  if (!isValidElement(node)) {
-    return false;
-  }
-  if (isFragment(node)) {
-    return false;
-  }
-  return supportRef(node);
+  return isReactElement(node) && supportRef(node);
 };
+
+/**
+ * In React 19. `ref` is not a property from node.
+ * But a property from `props.ref`.
+ * To check if `props.ref` exist or fallback to `ref`.
+ */
+export const getNodeRef: <T = any>(
+  node: React.ReactNode,
+) => React.Ref<T> | null =
+  Number(version.split('.')[0]) >= 19
+    ? // >= React 19
+      node => {
+        if (isReactElement(node)) {
+          return (node as any).props.ref;
+        }
+        return null;
+      }
+    : // < React 19
+      node => {
+        if (isReactElement(node)) {
+          return (node as any).ref;
+        }
+        return null;
+      };

tests/ref.test.tsx

@@ -1,9 +1,11 @@
 /* eslint-disable no-eval */
 import { fireEvent, render } from '@testing-library/react';
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React from 'react';
 import useEvent from '../src/hooks/useEvent';
 import {
   composeRef,
+  getNodeRef,
   supportNodeRef,
   supportRef,
   useComposeRef,
@@ -199,4 +201,11 @@ describe('ref', () => {
       expect(supportNodeRef(refCom) && refCom.ref).toBeTruthy();
     });
   });
+
+  it('getNodeRef', () => {
+    const ref = React.createRef<HTMLDivElement>();
+    const node = <div ref={ref} />;
+
+    expect(getNodeRef(node)).toBe(ref);
+  });
 });