diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index ce8a96f..950290c 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -38,7 +38,7 @@ jobs:
strategy:
matrix:
node-version: [16.x, 18.x, 20.x]
- react-version: [17.x, 18.x]
+ react-version: [17.x, 18.x, 19.x]
include:
- node-version: 12.x
react-version: 16.0.0
@@ -53,10 +53,11 @@ jobs:
- name: Install dependencies
run: npm install
- name: Install React ${{matrix.react-version}}
- if: matrix.react-version != '18.x'
+ if: matrix.react-version != '19.x'
run: |
npm install --save-dev \
react@${{matrix.react-version}} \
- react-dom@${{matrix.react-version}}
+ react-dom@${{matrix.react-version}}\
+ @types/react@${{matrix.react-version}}
- name: Run tests
run: npm run tests-only
diff --git a/example/app.js b/example/app.js
index 0429d91..d71f88f 100644
--- a/example/app.js
+++ b/example/app.js
@@ -1,6 +1,6 @@
/* eslint-env browser */
import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
import YouTube from '@u-wave/react-youtube'; // eslint-disable-line import/no-unresolved
const {
@@ -128,5 +128,5 @@ function App() {
);
}
-// eslint-disable-next-line react/no-deprecated
-ReactDOM.render(, document.getElementById('example'));
+const root = ReactDOM.createRoot(document.getElementById('example'));
+root.render();
diff --git a/example/package.json b/example/package.json
index dd183ce..2a3c626 100644
--- a/example/package.json
+++ b/example/package.json
@@ -11,8 +11,8 @@
"dependencies": {
"@u-wave/react-youtube": "file:..",
"esbuild": "^0.14.0",
- "react": "^18.0.0",
- "react-dom": "^18.0.0",
+ "react": "^19.0.0",
+ "react-dom": "^19.0.0",
"serve": "^13.0.0"
}
}
diff --git a/package.json b/package.json
index 02fd816..b53a3ca 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
"url": "https://github.com/u-wave/react-youtube/issues"
},
"dependencies": {
- "@types/react": "^17.0.0",
+ "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
"@types/youtube": "0.0.50",
"load-script2": "^1.0.1",
"prop-types": "^15.7.2"
@@ -33,8 +33,8 @@
"mocha": "^10.0.0",
"prop-types-table": "^1.0.0",
"proxyquire": "^2.1.3",
- "react": "^18.0.0",
- "react-dom": "^18.0.0",
+ "react": "^19.0.0",
+ "react-dom": "^19.0.0",
"rollup": "^2.0.2",
"tsd": "^0.31.0"
},
@@ -51,7 +51,7 @@
"module": "dist/react-youtube.es.js",
"types": "index.d.ts",
"peerDependencies": {
- "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+ "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
},
"repository": {
"type": "git",
diff --git a/test/util/render.js b/test/util/render.js
index f13c668..7ed7e90 100644
--- a/test/util/render.js
+++ b/test/util/render.js
@@ -7,12 +7,11 @@ import React from 'react';
import ReactDOM from 'react-dom';
// Doing this after React is loaded makes React do a bit less DOM work
import 'min-react-env/install';
-import env from 'min-react-env';
import createYouTube from './createYouTube';
-Object.assign(global, env);
+const reactMajor = parseInt((ReactDOM.version || '16').split('.')[0], 10);
-const render = (initialProps) => {
+async function render(initialProps) {
const { YouTube, sdkMock, playerMock } = createYouTube();
let component;
@@ -36,18 +35,33 @@ const render = (initialProps) => {
}
}
- const div = env.document.createElement('div');
- const container = new Promise((resolve) => {
- // eslint-disable-next-line react/no-deprecated
- ReactDOM.render(, div);
+ const div = document.createElement('div');
+ let root;
+ if (reactMajor >= 18) {
+ const { createRoot } = await import('react-dom/client');
+ root = createRoot(div);
+ } else {
+ root = {
+ render(element) {
+ // eslint-disable-next-line react/no-deprecated
+ ReactDOM.render(element, div);
+ },
+ unmount() {
+ // eslint-disable-next-line react/no-deprecated
+ ReactDOM.unmountComponentAtNode(div);
+ },
+ };
+ }
+ const container = await new Promise((resolve) => {
+ root.render();
});
function rerender(newProps) {
- return container.then((wrapper) => new Promise((resolve) => {
- wrapper.setState({ props: newProps }, () => {
+ return new Promise((resolve) => {
+ container.setState({ props: newProps }, () => {
Promise.resolve().then(resolve);
});
- }));
+ });
}
function unmount() {
@@ -62,6 +76,6 @@ const render = (initialProps) => {
rerender,
unmount,
}));
-};
+}
export default render;