diff --git a/README.md b/README.md index ec8226c..1496f23 100644 --- a/README.md +++ b/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 diff --git a/package.json b/package.json index c8871cf..36ef2cb 100644 --- a/package.json +++ b/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", diff --git a/vite.config.ts b/vite.config.ts index a12f3ff..fe69632 100644 --- a/vite.config.ts +++ b/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,