chore: Add support for React 19 (#141)

README.md

@@ -161,7 +161,7 @@ import React, { useRef } from 'react';
 import { useInViewport } from 'react-in-viewport';
 
 const MySectionBlock = () => {
-  const myRef = useRef();
+  const myRef = useRef(null);
   const {
     inViewport,
     enterCount,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-in-viewport",
-  "version": "1.0.0-beta.7",
+  "version": "1.0.0-beta.8",
   "description": "Track React component in viewport using Intersection Observer API",
   "author": "Roderick Hsiao <[email protected]>",
   "license": "MIT",
@@ -45,7 +45,7 @@
     "@testing-library/react": "^14.0.0",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/jest": "^29.0.0",
-    "@types/react-test-renderer": "^18.0.0",
+    "@types/react-test-renderer": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^5.17.0",
     "@typescript-eslint/parser": "^5.17.0",
     "add": "^2.0.6",
@@ -67,10 +67,10 @@
     "jest-cli": "^29.0.0",
     "jest-environment-jsdom": "^29.3.1",
     "jest-junit": "^15.0.0",
-    "react": "^18.0.0",
+    "react": "^19.0.0",
     "react-aspect-ratio": "^1.1.8",
-    "react-dom": "^18.0.0",
-    "react-test-renderer": "^18.0.0",
+    "react-dom": "^19.0.0",
+    "react-test-renderer": "^19.0.0",
     "storybook": "^8.3.2",
     "typescript": "^5.0.0",
     "webpack": "^5.75.0"

src/lib/handleViewport.tsx

@@ -1,4 +1,5 @@
 import { useRef, forwardRef } from 'react';
+import type { ComponentType, PropsWithoutRef } from 'react';
 import hoistNonReactStatic from 'hoist-non-react-statics';
 
 import type {
@@ -15,15 +16,15 @@ function handleViewport<
   TElement extends HTMLElement,
   TProps extends InjectedViewportProps<TElement>,
 >(
-  TargetComponent: React.ComponentType<TProps>,
+  TargetComponent: ComponentType<PropsWithoutRef<TProps>>,
   options: Options = defaultOptions,
-  config: Config = defaultConfig,
+  config: Config = defaultConfig
 ) {
   const ForwardedRefComponent = forwardRef<TElement, TProps>((props, ref) => {
     const refProps = {
       forwardedRef: ref,
       // pass both ref/forwardedRef for class component for backward compatibility
-    };
+    } as const;
     return <TargetComponent {...props} {...refProps} />;
   });
 
@@ -53,9 +54,10 @@ function handleViewport<
     return <ForwardedRefComponent {...props} ref={node} />;
   };
 
-  const name = (TargetComponent as React.FC).displayName
-    || (TargetComponent as React.FC).name
-    || 'Component';
+  const name =
+    (TargetComponent as React.FC).displayName ||
+    (TargetComponent as React.FC).name ||
+    'Component';
   InViewport.displayName = `handleViewport(${name})`;
 
   return hoistNonReactStatic(InViewport, ForwardedRefComponent);

src/lib/types.ts

@@ -1,3 +1,5 @@
+import type { RefObject } from 'react';
+
 export type Config = {
   disconnectOnLeave?: boolean;
 };
@@ -6,12 +8,12 @@ export type InjectedViewportProps<TElement extends HTMLElement = HTMLElement> =
   inViewport: boolean;
   enterCount: number;
   leaveCount: number;
-  forwardedRef: React.RefObject<TElement>;
+  readonly forwardedRef: RefObject<TElement>;
 };
 
 export type CallbackProps = {
-  onEnterViewport?: () => void;
-  onLeaveViewport?: () => void;
+  onEnterViewport?: VoidFunction
+  onLeaveViewport?: VoidFunction;
 };
 
 export type Options = IntersectionObserverInit;

src/lib/useInViewport.tsx

@@ -1,4 +1,5 @@
-import React, {
+import {
+  type RefObject,
   useEffect,
   useRef,
   useState,
@@ -15,15 +16,15 @@ const defaultMutationObserverOption = {
 };
 
 const useInViewport = (
-  target: React.RefObject<HTMLElement>,
+  target: RefObject<HTMLElement | null>,
   options: Options = defaultOptions,
   config: Config = defaultConfig,
   props: CallbackProps = defaultProps,
 ) => {
   const { onEnterViewport, onLeaveViewport } = props;
   const [, forceUpdate] = useState<boolean>();
 
-  const observer = useRef<IntersectionObserver>();
+  const observer = useRef<IntersectionObserver>(undefined);
 
   const inViewportRef = useRef<boolean>(false);
   const intersected = useRef<boolean>(false);