chore(react): update JSX transform to "react-jsx" and drop React 16 s…

…upport (#417)

.changeset/mean-dolls-brush.md

@@ -0,0 +1,5 @@
+---
+'@lottiefiles/dotlottie-react': minor
+---
+
+chore(react): update JSX transform to "react-jsx" and drop React 16 support

.github/workflows/main.yml

@@ -42,7 +42,7 @@ jobs:
 
       - name: 🛡️ Test
         run: |
-          npx playwright install --with-deps
+          npx playwright install --with-deps chromium
           pnpm test:coverage
         working-directory: packages/web
 

packages/react/package.json

@@ -41,18 +41,15 @@
     "type-check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^17 || ^18"
   },
   "dependencies": {
     "@lottiefiles/dotlottie-web": "workspace:*"
   },
   "devDependencies": {
     "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.15",
     "cross-env": "7.0.3",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "tsup": "8.0.1",
     "typescript": "5.0.4"
   },

packages/react/src/dotlottie-worker.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 import type { DotLottieWorker, Config } from '@lottiefiles/dotlottie-web';
-import type { ComponentProps, RefCallback } from 'react';
-import React from 'react';
+import { useEffect, type ComponentProps, type RefCallback } from 'react';
 
 import { useDotLottieWorker } from './use-dotlottie-worker';
 import useStableCallback from './use-stable-callback';
@@ -59,7 +58,7 @@ export const DotLottieWorkerReact = ({
   const stableDotLottieRefCallback =
     typeof dotLottieRefCallback === 'function' ? useStableCallback(dotLottieRefCallback) : undefined;
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (typeof stableDotLottieRefCallback === 'function') {
       stableDotLottieRefCallback(dotLottie);
     }

packages/react/src/dotlottie.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 import type { DotLottie, Config } from '@lottiefiles/dotlottie-web';
-import type { ComponentProps, RefCallback } from 'react';
-import React from 'react';
+import { useEffect, type ComponentProps, type RefCallback } from 'react';
 
 import { useDotLottie } from './use-dotlottie';
 import useStableCallback from './use-stable-callback';
@@ -56,7 +55,7 @@ export const DotLottieReact = ({
   const stableDotLottieRefCallback =
     typeof dotLottieRefCallback === 'function' ? useStableCallback(dotLottieRefCallback) : undefined;
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (typeof stableDotLottieRefCallback === 'function') {
       stableDotLottieRefCallback(dotLottie);
     }

packages/react/src/use-dotlottie-worker.tsx

@@ -1,6 +1,6 @@
 import type { Config } from '@lottiefiles/dotlottie-web';
 import { DotLottieWorker } from '@lottiefiles/dotlottie-web';
-import React, { useCallback, useState, useEffect, useRef } from 'react';
+import { useCallback, useState, useEffect, useRef } from 'react';
 import type { ComponentProps, RefCallback } from 'react';
 
 interface DotLottieWorkerComponentProps {

packages/react/src/use-dotlottie.tsx

@@ -1,6 +1,6 @@
 import type { Config } from '@lottiefiles/dotlottie-web';
 import { DotLottie } from '@lottiefiles/dotlottie-web';
-import React, { useCallback, useState, useEffect, useRef } from 'react';
+import { useCallback, useState, useEffect, useRef } from 'react';
 import type { ComponentProps, RefCallback } from 'react';
 
 interface DotLottieComponentProps {

packages/react/tsconfig.build.json

@@ -10,7 +10,7 @@
     // Source root directory
     "rootDir": ".",
 
-    "jsx": "react",
+    "jsx": "react-jsx",
 
     "exactOptionalPropertyTypes": false
   },

packages/react/tsconfig.json

@@ -4,7 +4,7 @@
 
   // Compiler options
   "compilerOptions": {
-    "jsx": "react",
+    "jsx": "react-jsx",
     "exactOptionalPropertyTypes": false
   }
 }