feat!: add react 19 support (#526)

Author: longpoll

CHANGELOG.md

@@ -19,8 +19,8 @@
     "*.{js,ts,tsx,css,scss,json,md,mdx,yml}": "prettier --write"
   },
   "devDependencies": {
-    "husky": "4.3.0",
-    "lint-staged": "10.5.1",
+    "husky": "4.3.8",
+    "lint-staged": "10.5.4",
     "prettier": "3.6.2"
   },
   "version": "6.4.2",

package.json

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import { Modal } from '../src';
 import { describe, it, expect, vitest } from 'vitest';

react-responsive-modal/__tests__/index.test.tsx

@@ -49,32 +49,32 @@
     }
   ],
   "dependencies": {
-    "@bedrock-layout/use-forwarded-ref": "^1.3.1",
+    "@bedrock-layout/use-forwarded-ref": "^2.0.17",
     "body-scroll-lock": "^3.1.5",
     "classnames": "^2.3.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17 || ^18",
-    "react-dom": "^16.8.0 || ^17 || ^18"
+    "react": "^16.8.0 || ^17 || ^18 || ^19",
+    "react-dom": "^16.8.0 || ^17 || ^18 || ^19"
   },
   "devDependencies": {
     "@codecov/vite-plugin": "1.9.1",
     "@size-limit/preset-small-lib": "11.2.0",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.3.0",
-    "@types/body-scroll-lock": "2.6.1",
-    "@types/classnames": "2.2.11",
-    "@types/node": "22.8.2",
-    "@types/react": "16.9.56",
-    "@types/react-dom": "16.9.9",
+    "@types/body-scroll-lock": "2.6.2",
+    "@types/classnames": "2.3.4",
+    "@types/node": "22.16.3",
+    "@types/react": "19.1.8",
+    "@types/react-dom": "19.1.6",
     "@vitejs/plugin-react": "4.6.0",
     "@vitest/coverage-istanbul": "3.2.4",
     "cypress": "14.5.1",
     "jsdom": "26.1.0",
     "publint": "0.3.12",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
     "size-limit": "11.2.0",
     "tsdown": "0.12.9",
     "tslib": "2.8.1",

react-responsive-modal/package.json

@@ -8,11 +8,11 @@ import {
 
 interface FocusTrapProps {
   container?: React.RefObject<HTMLElement> | null;
-  initialFocusRef?: React.RefObject<HTMLElement>;
+  initialFocusRef?: React.RefObject<HTMLElement | null>;
 }
 
 export const FocusTrap = ({ container, initialFocusRef }: FocusTrapProps) => {
-  const refLastFocus = useRef<HTMLElement | null>();
+  const refLastFocus = useRef<HTMLElement | null>(null);
   /**
    * Handle focus lock on the modal
    */

react-responsive-modal/src/FocusTrap.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
-import ReactDom from 'react-dom';
+import { createPortal } from 'react-dom';
 import cx from 'classnames';
+import { useForwardedRef } from '@bedrock-layout/use-forwarded-ref';
 import CloseIcon from './CloseIcon';
 import { FocusTrap } from './FocusTrap';
 import { modalManager, useModalManager } from './modalManager';
 import { useScrollLock } from './useScrollLock';
 import { isBrowser } from './utils';
-import useForwardedRef from '@bedrock-layout/use-forwarded-ref';
 
 const classes = {
   root: 'react-responsive-modal-root',
@@ -75,7 +75,7 @@ export interface ModalProps {
    *
    * Default to undefined.
    */
-  initialFocusRef?: React.RefObject<HTMLElement>;
+  initialFocusRef?: React.RefObject<HTMLElement | null>;
   /**
    * You can specify a container prop which should be of type `Element`.
    * The portal will be rendered inside that element.
@@ -310,7 +310,7 @@ export const Modal = React.forwardRef(
       : (classNames?.modalAnimationOut ?? classes.modalAnimationOut);
 
     return showPortal && containerModal
-      ? ReactDom.createPortal(
+      ? createPortal(
           <div
             className={cx(classes.root, classNames?.root)}
             style={styles?.root}

react-responsive-modal/src/index.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react';
 import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
 
 export const useScrollLock = (
-  refModal: React.RefObject<Element>,
+  refModal: React.RefObject<Element | null>,
   open: boolean,
   showPortal: boolean,
   blockScroll: boolean,

react-responsive-modal/src/useScrollLock.ts

@@ -10,8 +10,8 @@
   },
   "dependencies": {
     "next": "15.3.5",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
     "react-responsive-modal": "workspace:react-responsive-modal"
   },
   "devDependencies": {
@@ -21,9 +21,9 @@
     "@tailwindcss/postcss": "4.1.11",
     "@tailwindcss/typography": "0.5.16",
     "@types/mdx": "2.0.13",
-    "@types/node": "22.8.2",
-    "@types/react": "16.9.56",
-    "@types/react-dom": "16.9.9",
+    "@types/node": "22.16.3",
+    "@types/react": "19.1.8",
+    "@types/react-dom": "19.1.6",
     "fathom-client": "3.7.2",
     "highlight.js": "11.11.1",
     "postcss": "8.5.6",

website/package.json

@@ -8,7 +8,7 @@ import CustomAnimation from '../examples/CustomAnimation';
 import CustomCloseIcon from '../examples/CustomCloseIcon';
 import CustomContainer from '../examples/CustomContainer';
 
-const examples: Record<string, () => JSX.Element> = {
+const examples: Record<string, () => React.ReactElement> = {
   simple: Simple,
   multiple: ExampleMultiple,
   longContent: LongContent,

website/src/components/ExampleRendered.tsx

@@ -3,7 +3,7 @@ import { Modal } from 'react-responsive-modal';
 
 const App = () => {
   const [open, setOpen] = React.useState(false);
-  const modalRef = useRef(null);
+  const modalRef = useRef<HTMLDivElement>(null);
 
   return (
     <>