fix: resolve React 19 compatibility issue

README.md

@@ -15,6 +15,15 @@ The only thin that is different is the visible design and scrollbar layout.
 npm i react-custom-scroll --save
 ```
 
+### Peer Dependencies
+This package requires React 18+ to be installed in your project:
+
+```sh
+npm install react@">=18.0.0" react-dom@">=18.0.0"
+```
+
+**Note:** Most React projects already have these installed, so you typically don't need to install anything extra.
+
 ### Why do I need this ?  
 - Same design on all browsers
 - Scrollbar is above the content instead of floating to the side - same layout on scrolled content as not scrolled content

package.json

@@ -25,10 +25,12 @@
   },
   "dependencies": {
     "@types/lodash": "^4.14.202",
-    "lodash": "^4.17.21",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "styled-components": "^6.1.8"
+    "styled-components": "^6.1.8",
+    "lodash": "^4.17.21"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.50.1",
@@ -44,6 +46,8 @@
     "eslint-plugin-react-refresh": "^0.4.5",
     "postcss": "^8.4.33",
     "prettier": "^3.2.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.2.2",
     "vite": "^5.0.8",

vite.config.ts

@@ -22,9 +22,13 @@ export default defineConfig(({ mode }) => {
         fileName: (format) => `index.${format}.js`,
       },
       rollupOptions: {
-        external: ["react", "react-dom"],
+        external: ["react", "react-dom", "react/jsx-runtime"],
         output: {
-          globals: { react: "React", "react-dom": "ReactDOM" },
+          globals: { 
+            react: "React", 
+            "react-dom": "ReactDOM",
+            "react/jsx-runtime": "React"
+          },
         },
       },
       sourcemap: true,