fix: remove React import

.storybook/main.ts

@@ -8,7 +8,16 @@ const storybookConfig: StorybookConfig = {
     name: '@storybook/react-webpack5',
     options: {},
   },
-
+  // JSX transform no longer requires importing React explicitly in every file.
+  swc: () => ({
+    jsc: {
+      transform: {
+        react: {
+          runtime: 'automatic',
+        },
+      },
+    },
+  }),
   webpackFinal: (config) => {
     // Resolve absolute imports
     config.resolve?.modules?.push(path.resolve(process.cwd(), 'src'));

README.md

@@ -49,7 +49,6 @@ npm install react-parallax-tilt
 ## Example
 
 ```jsx
-import React from 'react';
 import ReactDOM from 'react-dom';
 import Tilt from 'react-parallax-tilt';
 

eslint.config.mjs

@@ -65,6 +65,8 @@ export default tseslint.config(
       // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
       ...eslintPluginReactHooks.configs.recommended.rules,
 
+      'react/react-in-jsx-scope': 'off',
+
       'prefer-template': 'error',
       'no-nested-ternary': 'error',
       'no-unneeded-ternary': 'error',

scripts/tsconfig.base.json

@@ -7,7 +7,7 @@
       ".": ["."]
     },
     "importHelpers": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "lib": ["ESNext", "DOM"],
     "module": "ESNext",
     "moduleResolution": "Bundler",

src/features/glare/test/glare.test.tsx

@@ -1,6 +1,5 @@
 import { screen, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 
 import type { OnMove, OnMoveParams } from 'index';
 import { TiltTest } from 'utils/TiltTest';

src/features/glare/test/glareStyle.test.tsx

@@ -1,5 +1,4 @@
 import { screen, render, fireEvent } from '@testing-library/react';
-import React from 'react';
 
 import type { OnMove } from 'index';
 import { TiltTest } from 'utils/TiltTest';

src/features/tilt/test/tiltAxis.test.tsx

@@ -1,6 +1,5 @@
 import { screen, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 
 import type { OnMove, OnMoveParams } from 'index';
 import { TiltTest } from 'utils/TiltTest';

src/features/tilt/test/tiltDisable.test.tsx

@@ -1,5 +1,4 @@
 import { screen, render, fireEvent } from '@testing-library/react';
-import React from 'react';
 
 import type { OnMove, OnMoveParams } from 'index';
 import { TiltTest } from 'utils/TiltTest';

src/features/tilt/test/tiltManualAngle.test.tsx

@@ -1,6 +1,5 @@
 import { screen, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 
 import type { OnMove, OnMoveParams } from 'index';
 import { TiltTest } from 'utils/TiltTest';

src/features/tilt/test/tiltMaxAngle.test.tsx

@@ -1,6 +1,5 @@
 import { screen, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 
 import type { OnMove, OnMoveParams } from 'index';
 import { TiltTest } from 'utils/TiltTest';

src/features/tilt/test/tiltOnEnter.test.tsx

@@ -1,5 +1,4 @@
 import { screen, render, fireEvent } from '@testing-library/react';
-import React from 'react';
 
 import type { OnEnter } from 'index';
 import { TiltTest } from 'utils/TiltTest';

src/features/tilt/test/tiltOnLeave.test.tsx

@@ -1,5 +1,4 @@
 import { screen, render, fireEvent } from '@testing-library/react';
-import React from 'react';
 
 import type { OnLeave } from 'index';
 import { TiltTest } from 'utils/TiltTest';

src/features/tilt/test/tiltOnPropChange.test.tsx

@@ -1,6 +1,5 @@
 import { screen, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 
 import type { OnMove, OnMoveParams } from 'index';
 import { TiltTest } from 'utils/TiltTest';

src/features/tilt/test/tiltOnTouchMove.test.tsx

@@ -1,5 +1,4 @@
 import { screen, render, fireEvent } from '@testing-library/react';
-import React from 'react';
 
 import type { OnMove, OnMoveParams } from 'index';
 import { TiltTest } from 'utils/TiltTest';

src/features/tilt/test/tiltReset.test.tsx

@@ -1,5 +1,4 @@
 import { screen, render, fireEvent } from '@testing-library/react';
-import React from 'react';
 
 import type { OnEnter, OnLeave, OnMove, OnMoveParams } from 'index';
 import { TiltTest } from 'utils/TiltTest';

src/features/tilt/test/tiltReverse.test.tsx

@@ -1,6 +1,5 @@
 import { screen, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 
 import type { OnMove, OnMoveParams } from 'index';
 import { TiltTest } from 'utils/TiltTest';

src/features/tilt/test/tiltStyle.test.tsx

@@ -1,5 +1,4 @@
 import { screen, render, fireEvent } from '@testing-library/react';
-import React from 'react';
 
 import type { OnMove } from 'index';
 import { TiltTest } from 'utils/TiltTest';

src/features/tilt/test/tiltTrackOnWindow.test.tsx

@@ -1,6 +1,5 @@
 import { screen, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 
 import type { OnMove, OnMoveParams } from 'index';
 import { TiltTest } from 'utils/TiltTest';

src/react-parallax-tilt/ReactParallaxTilt.tsx

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 
 import { Glare } from 'features/glare/Glare';
 import { Tilt } from 'features/tilt/Tilt';

src/utils/TiltTest.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { ReactParallaxTiltProps } from 'index';
 import Tilt from 'index';
 

stories/Default/Default.demozap.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import Tilt from 'index';
 
 import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';

stories/Default/_Default.tsx

@@ -1,11 +1,8 @@
-import React from 'react';
 import { DemoTab } from 'react-demo-tab';
 
 import Demo from './Default.demozap';
 
-const code = `import React from 'react';
-
-import Tilt from 'index';
+const code = `import Tilt from 'index';
 
 import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';
 

stories/EventParams/EventParams.demozap.tsx

@@ -1,5 +1,5 @@
 import type { ChangeEvent } from 'react';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import type { OnEnterParams, OnLeaveParams, OnMoveParams } from 'index';
 import Tilt from 'index';

stories/EventParams/_EventParams.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
 import { DemoTab } from 'react-demo-tab';
 
 import Demo from './EventParams.demozap';
 
-const code = `import React, { useState, ChangeEvent } from 'react';
+const code = `import type { ChangeEvent } from 'react';
+import { useState } from 'react';
 
-import Tilt, { OnEnterParams, OnLeaveParams, OnMoveParams } from 'index';
+import type { OnEnterParams, OnLeaveParams, OnMoveParams } from 'index';
+import Tilt from 'index';
 
 import './EventParams.demozap.css';
 

stories/EventTiltAngle/EventTiltAngle.demozap.tsx

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 
 import type { OnMoveParams } from 'index';
 import Tilt from 'index';

stories/EventTiltAngle/_EventTiltAngle.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
 import { DemoTab } from 'react-demo-tab';
 
 import Demo from './EventTiltAngle.demozap';
 
-const code = `import React, { PureComponent } from 'react';
+const code = `import { PureComponent } from 'react';
 
-import Tilt, { OnMoveParams } from 'index';
+import type { OnMoveParams } from 'index';
+import Tilt from 'index';
 
 import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';
 import './EventTiltAngle.demozap.css';

stories/FlipPage/FlipPage.demozap.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import Tilt from 'index';
 

stories/FlipPage/Page/Page.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import './Page.css';
 import sampleImg from './lorem-picsum.png';
 

stories/FlipPage/_FlipPage.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
 import { DemoTab } from 'react-demo-tab';
 
 import Demo from './FlipPage.demozap';
 
-const code = `import React, { useState } from 'react';
+const code = `import { useState } from 'react';
 
 import Tilt from 'index';
 

stories/FlipVH/FlipVH.demozap.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import Tilt from 'index';
 import './FlipVH.demozap.css';

stories/FlipVH/_FlipVH.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
 import { DemoTab } from 'react-demo-tab';
 
 import Demo from './FlipVH.demozap';
 
-const code = `import React, { useState } from 'react';
+const code = `import { useState } from 'react';
 
 import Tilt from 'index';
 import './FlipVH.demozap.css';

stories/GlareEffect/GlareEffect.demozap.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import Tilt from 'index';
 
 import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';

stories/GlareEffect/_GlareEffect.tsx

@@ -1,11 +1,8 @@
-import React from 'react';
 import { DemoTab } from 'react-demo-tab';
 
 import Demo from './GlareEffect.demozap';
 
-const code = `import React from 'react';
-
-import Tilt from 'index';
+const code = `import Tilt from 'index';
 
 import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';
 

stories/GlareEffect360/GlareEffect360.demozap.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import Tilt from 'index';
 
 import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';

stories/GlareEffect360/_GlareEffect360.tsx

@@ -1,11 +1,8 @@
-import React from 'react';
 import { DemoTab } from 'react-demo-tab';
 
 import Demo from './GlareEffect360.demozap';
 
-const code = `import React from 'react';
-
-import Tilt from 'index';
+const code = `import Tilt from 'index';
 
 import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';
 

stories/GlareEffectNoTilt/GlareEffectNoTilt.demozap.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import Tilt from 'index';
 
 import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';

stories/GlareEffectNoTilt/_GlareEffectNoTilt.tsx

@@ -1,11 +1,8 @@
-import React from 'react';
 import { DemoTab } from 'react-demo-tab';
 
 import Demo from './GlareEffectNoTilt.demozap';
 
-const code = `import React from 'react';
-
-import Tilt from 'index';
+const code = `import Tilt from 'index';
 
 import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';
 

stories/InitialTilt/InitialTilt.demozap.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import Tilt from 'index';
 
 import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';

stories/InitialTilt/_InitialTilt.tsx

@@ -1,11 +1,8 @@
-import React from 'react';
 import { DemoTab } from 'react-demo-tab';
 
 import Demo from './InitialTilt.demozap';
 
-const code = `import React from 'react';
-
-import Tilt from 'index';
+const code = `import Tilt from 'index';
 
 import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';
 

stories/KeepFloating/KeepFloating.demozap.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import Tilt from 'index';
 
 import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';

stories/KeepFloating/_KeepFloating.tsx

@@ -1,11 +1,8 @@
-import React from 'react';
 import { DemoTab } from 'react-demo-tab';
 
 import Demo from './KeepFloating.demozap';
 
-const code = `import React from 'react';
-
-import Tilt from 'index';
+const code = `import Tilt from 'index';
 
 import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';
 

stories/MultipleTilt/MultipleTilt.demozap.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import Tilt from 'index';
 
 import './MultipleTilt.demozap.css';

stories/MultipleTilt/_MultipleTilt.tsx

@@ -1,11 +1,8 @@
-import React from 'react';
 import { DemoTab } from 'react-demo-tab';
 
 import Demo from './MultipleTilt.demozap';
 
-const code = `import React from 'react';
-
-import Tilt from 'index';
+const code = `import Tilt from 'index';
 
 import './MultipleTilt.demozap.css';
 import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';

stories/MultipleTiltScroll/MultipleTiltScroll.demozap.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import Tilt from 'index';
 
 import './MultipleTiltScroll.demozap.css';

stories/MultipleTiltScroll/_MultipleTiltScroll.tsx

@@ -1,11 +1,8 @@
-import React from 'react';
 import { DemoTab } from 'react-demo-tab';
 
 import Demo from './MultipleTiltScroll.demozap';
 
-const code = `import React from 'react';
-
-import Tilt from 'index';
+const code = `import Tilt from 'index';
 
 import './MultipleTiltScroll.demozap.css';
 import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';

stories/ParallaxEffect/ParallaxEffect.demozap.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import Tilt from 'index';
 import './ParallaxEffect.demozap.css';