Merge pull request #550 from aeharding/react-19-ref

Support React 19 ref as prop
inokawa · Dec 6, 2024 · d38b455 · d38b455
2 parents e583c7d + d903f39
commit d38b455
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 16 deletions.
diff --git a/src/react/VList.spec.tsx b/src/react/VList.spec.tsx
@@ -35,11 +35,9 @@ it("should pass attributes to element", () => {
 
 it("should pass index to items", () => {
   const Item = forwardRef<HTMLDivElement, CustomItemComponentProps>(
-    ({ children, index, style }, ref) => {
+    ({ index, ...rest }, ref) => {
       return (
-        <div ref={ref} style={style} data-index={index}>
-          {children}
-        </div>
+        <div ref={ref} data-index={index} {...rest} />
       );
     }
   );

diff --git a/src/react/WindowVirtualizer.spec.tsx b/src/react/WindowVirtualizer.spec.tsx
@@ -14,11 +14,9 @@ afterEach(cleanup);
 
 it("should pass index to items", () => {
   const Item = forwardRef<HTMLDivElement, CustomItemComponentProps>(
-    ({ children, index, style }, ref) => {
+    ({ index, ...rest }, ref) => {
       return (
-        <div ref={ref} style={style} data-index={index}>
-          {children}
-        </div>
+        <div ref={ref} data-index={index} {...rest} />
       );
     }
   );

diff --git a/src/react/types.ts b/src/react/types.ts
@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from "react";
+import { ComponentType, CSSProperties, LegacyRef, ReactNode } from "react";
 
 export type ViewportComponentAttributes = Pick<
   React.HTMLAttributes<HTMLElement>,
@@ -9,12 +9,14 @@ export type ViewportComponentAttributes = Pick<
 export interface CustomContainerComponentProps {
   style: CSSProperties;
   children: ReactNode;
+  /**
+   * only available after React 19
+   */
+  ref?: LegacyRef<any>;
 }
 
-export type CustomContainerComponent = React.ForwardRefExoticComponent<
-  React.PropsWithoutRef<CustomContainerComponentProps> &
-    React.RefAttributes<any>
->;
+export type CustomContainerComponent =
+  ComponentType<CustomContainerComponentProps>;
 
 /**
  * Props of customized item component for {@link Virtualizer} or {@link WindowVirtualizer}.
@@ -23,8 +25,10 @@ export interface CustomItemComponentProps {
   style: CSSProperties;
   index: number;
   children: ReactNode;
+  /**
+   * only available after React 19
+   */
+  ref?: LegacyRef<any>;
 }
 
-export type CustomItemComponent = React.ForwardRefExoticComponent<
-  React.PropsWithoutRef<CustomItemComponentProps> & React.RefAttributes<any>
->;
+export type CustomItemComponent = ComponentType<CustomItemComponentProps>;