overlayscrollbars-react react18 support

This commit is contained in:
Rene
2022-05-30 23:33:54 +02:00
parent 1531dc6bfc
commit 4c87d00ea7
7 changed files with 127 additions and 104 deletions
+33 -12
View File
@@ -3,7 +3,7 @@
<a href="https://kingsora.github.io/OverlayScrollbars/"><img src="https://kingsora.github.io/OverlayScrollbars/design/logo.svg" width="200" height="133" alt="OverlayScrollbars"></a> <a href="https://kingsora.github.io/OverlayScrollbars/"><img src="https://kingsora.github.io/OverlayScrollbars/design/logo.svg" width="200" height="133" alt="OverlayScrollbars"></a>
</p> </p>
<h6 align="center"> <h6 align="center">
<a href="https://github.com/facebook/react/"><img src="https://img.shields.io/badge/React-%5E16.4.0-61dafb?style=flat-square&logo=React" alt="React"></a> <a href="https://github.com/facebook/react/"><img src="https://img.shields.io/badge/React-=%3E16.4.0-61dafb?style=flat-square&logo=React" alt="React"></a>
<a href="https://github.com/KingSora/OverlayScrollbars"><img src="https://img.shields.io/badge/OverlayScrollbars-%5E1.10.0-36befd?style=flat-square" alt="OverlayScrollbars"></a> <a href="https://github.com/KingSora/OverlayScrollbars"><img src="https://img.shields.io/badge/OverlayScrollbars-%5E1.10.0-36befd?style=flat-square" alt="OverlayScrollbars"></a>
<a href="https://www.npmjs.com/package/overlayscrollbars-react"><img src="https://img.shields.io/npm/dt/overlayscrollbars-react.svg?style=flat-square" alt="Downloads"></a> <a href="https://www.npmjs.com/package/overlayscrollbars-react"><img src="https://img.shields.io/npm/dt/overlayscrollbars-react.svg?style=flat-square" alt="Downloads"></a>
<a href="https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars-react/LICENSE"><img src="https://img.shields.io/github/license/kingsora/overlayscrollbars.svg?style=flat-square" alt="License"></a> <a href="https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars-react/LICENSE"><img src="https://img.shields.io/github/license/kingsora/overlayscrollbars.svg?style=flat-square" alt="License"></a>
@@ -20,77 +20,98 @@
</h5> </h5>
## Installation ## Installation
```sh ```sh
npm install overlayscrollbars-react npm install overlayscrollbars-react
``` ```
## Peer Dependencies ## Peer Dependencies
OverlayScrollbars for React has the following **peer dependencies**: OverlayScrollbars for React has the following **peer dependencies**:
- The vanilla JavaScript library: [overlayscrollbars](https://www.npmjs.com/package/overlayscrollbars)
- The vanilla JavaScript library: [overlayscrollbars](https://www.npmjs.com/package/overlayscrollbars)
``` ```
npm install overlayscrollbars npm install overlayscrollbars
``` ```
- The React framework: [react](https://www.npmjs.com/package/react) - The React framework: [react](https://www.npmjs.com/package/react)
``` ```
npm install react npm install react
``` ```
## TypeScript ## TypeScript
- In case you are using TypeScript, you have to install the [OverlayScrollbars typings](https://www.npmjs.com/package/@types/overlayscrollbars): - In case you are using TypeScript, you have to install the [OverlayScrollbars typings](https://www.npmjs.com/package/@types/overlayscrollbars):
``` ```
npm install @types/overlayscrollbars npm install @types/overlayscrollbars
``` ```
Since this wrapper is written in TypeScript it comes with its generated typings.<br> Since this wrapper is written in TypeScript it comes with its generated typings.<br>
Check out the [recommended](https://github.com/KingSora/OverlayScrollbars#typescript) **tsconfig.json** options. Check out the [recommended](https://github.com/KingSora/OverlayScrollbars#typescript) **tsconfig.json** options.
## Usage ## Usage
#### CSS #### CSS
You have to import the `OverlayScrollbars.css` by yourself.<br> You have to import the `OverlayScrollbars.css` by yourself.<br>
The component **doesn't** do it for you as the styles are **global styles**!<br> The component **doesn't** do it for you as the styles are **global styles**!<br>
There are different ways to achieve this, in React the most simple way for me was to add [this line](https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars-react/example/src/index.tsx#L1) in the `index` file: There are different ways to achieve this, in React the most simple way for me was to add [this line](https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars-react/example/src/index.tsx#L1) in the `index` file:
```js ```js
import 'overlayscrollbars/css/OverlayScrollbars.css'; import "overlayscrollbars/css/OverlayScrollbars.css";
``` ```
#### Import #### Import
Simply import the component into your file(s): Simply import the component into your file(s):
```js ```js
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'; import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
``` ```
#### Template #### Template
After the import you can use it in JSX: After the import you can use it in JSX:
```jsx ```jsx
<OverlayScrollbarsComponent> <OverlayScrollbarsComponent>example content</OverlayScrollbarsComponent>
example content
</OverlayScrollbarsComponent>
``` ```
#### Properties #### Properties
Two properties are accepted: `options` and `extensions`. Two properties are accepted: `options` and `extensions`.
- The `options` property accepts a `object` and can be changed at any point in time, and the plugin will adapt. - The `options` property accepts a `object` and can be changed at any point in time, and the plugin will adapt.
- The `extensions` property accepts a `string`, `string array` or `object` and is only taken into account if the component gets mounted. - The `extensions` property accepts a `string`, `string array` or `object` and is only taken into account if the component gets mounted.
```jsx ```jsx
<OverlayScrollbarsComponent <OverlayScrollbarsComponent
options={{ scrollbars: { autoHide: 'scroll' } }} options={{ scrollbars: { autoHide: "scroll" } }}
extensions={['extensionA', 'extensionB']} extensions={["extensionA", "extensionB"]}
> ></OverlayScrollbarsComponent>
</OverlayScrollbarsComponent>
``` ```
You can read more about the `options` object [here](https://kingsora.github.io/OverlayScrollbars/#!documentation/options), `extensions` are documented [here](https://kingsora.github.io/OverlayScrollbars/#!documentation/extensions-basics) and [here](https://kingsora.github.io/OverlayScrollbars/#!documentation/initialization). You can read more about the `options` object [here](https://kingsora.github.io/OverlayScrollbars/#!documentation/options), `extensions` are documented [here](https://kingsora.github.io/OverlayScrollbars/#!documentation/extensions-basics) and [here](https://kingsora.github.io/OverlayScrollbars/#!documentation/initialization).
#### Instance #### Instance
If you get the component reference, it provides two methods: `osInstance()` and `osTarget()`. If you get the component reference, it provides two methods: `osInstance()` and `osTarget()`.
- The `osInstance()` method returns the OverlayScrollbars `instance` of the component, or `null` if the instance isn't initialized yet or already destroyed. - The `osInstance()` method returns the OverlayScrollbars `instance` of the component, or `null` if the instance isn't initialized yet or already destroyed.
- The `osTarget()` method returns the native `html` element to which the plugin was initialized, or `null` if the the component isn't mounted yet or already unmounted. - The `osTarget()` method returns the native `html` element to which the plugin was initialized, or `null` if the the component isn't mounted yet or already unmounted.
## Example App ## Example App
In case you need a example app for reference, you can use the example app in this repo(`example folder`): In case you need a example app for reference, you can use the example app in this repo(`example folder`):
- [Live example](https://kingsora.github.io/OverlayScrollbars/frameworks/react/) - [Live example](https://kingsora.github.io/OverlayScrollbars/frameworks/react/)
- [Source code](https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-react/example) - [Source code](https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-react/example)
If you wanna build the example app, run these commands: If you wanna build the example app, run these commands:
```sh ```sh
npm run setup npm run setup
npm run build npm run build
@@ -99,4 +120,4 @@ npm run example
## License ## License
MIT MIT
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+31 -30
View File
@@ -1410,9 +1410,9 @@
"integrity": "sha512-U3t35G0IH39eCoWKI6auh+3NkeP8jrmLyeZhiL3fKn4foOvbl223Ccd9cfUb1vhcxDmpTNAfKphDvl5jYJOD3w==" "integrity": "sha512-U3t35G0IH39eCoWKI6auh+3NkeP8jrmLyeZhiL3fKn4foOvbl223Ccd9cfUb1vhcxDmpTNAfKphDvl5jYJOD3w=="
}, },
"@types/prop-types": { "@types/prop-types": {
"version": "15.7.1", "version": "15.7.5",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.1.tgz", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
"integrity": "sha512-CFzn9idOEpHrgdw8JsoTkaDDyRWk1jrzIV8djzcgpq0y9tG4B4lFT+Nxh52DVpDXV+n4+NPNv7M1Dj5uMp6XFg==" "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
}, },
"@types/q": { "@types/q": {
"version": "1.5.2", "version": "1.5.2",
@@ -1420,22 +1420,28 @@
"integrity": "sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==" "integrity": "sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw=="
}, },
"@types/react": { "@types/react": {
"version": "16.8.23", "version": "18.0.0",
"resolved": "https://registry.npmjs.org/@types/react/-/react-16.8.23.tgz", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.0.tgz",
"integrity": "sha512-abkEOIeljniUN9qB5onp++g0EY38h7atnDHxwKUFz1r3VH1+yG1OKi2sNPTyObL40goBmfKFpdii2lEzwLX1cA==", "integrity": "sha512-7+K7zEQYu7NzOwQGLR91KwWXXDzmTFODRVizJyIALf6RfLv2GDpqpknX64pvRVILXCpXi7O/pua8NGk44dLvJw==",
"requires": { "requires": {
"@types/prop-types": "*", "@types/prop-types": "*",
"csstype": "^2.2.0" "@types/scheduler": "*",
"csstype": "^3.0.2"
} }
}, },
"@types/react-dom": { "@types/react-dom": {
"version": "16.8.5", "version": "18.0.0",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.8.5.tgz", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.0.tgz",
"integrity": "sha512-idCEjROZ2cqh29+trmTmZhsBAUNQuYrF92JHKzZ5+aiFM1mlSk3bb23CK7HhYuOY75Apgap5y2jTyHzaM2AJGA==", "integrity": "sha512-49897Y0UiCGmxZqpC8Blrf6meL8QUla6eb+BBhn69dTXlmuOlzkfr7HHY/O8J25e1lTUMs+YYxSlVDAaGHCOLg==",
"requires": { "requires": {
"@types/react": "*" "@types/react": "*"
} }
}, },
"@types/scheduler": {
"version": "0.16.2",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
},
"@types/stack-utils": { "@types/stack-utils": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz", "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
@@ -3963,9 +3969,9 @@
} }
}, },
"csstype": { "csstype": {
"version": "2.6.6", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.6.tgz", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
"integrity": "sha512-RpFbQGUE74iyPgvr46U9t1xoQBM8T4BL8SxrN66Le2xYAPSaDJJKeztV3awugusb3g3G9iL8StmkBBXhcbbXhg==" "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
}, },
"cyclist": { "cyclist": {
"version": "0.2.2", "version": "0.2.2",
@@ -10006,13 +10012,11 @@
} }
}, },
"react": { "react": {
"version": "16.13.1", "version": "18.1.0",
"resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz", "resolved": "https://registry.npmjs.org/react/-/react-18.1.0.tgz",
"integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==", "integrity": "sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==",
"requires": { "requires": {
"loose-envify": "^1.1.0", "loose-envify": "^1.1.0"
"object-assign": "^4.1.1",
"prop-types": "^15.6.2"
} }
}, },
"react-app-polyfill": { "react-app-polyfill": {
@@ -10121,14 +10125,12 @@
} }
}, },
"react-dom": { "react-dom": {
"version": "16.13.1", "version": "18.1.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.1.0.tgz",
"integrity": "sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==", "integrity": "sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w==",
"requires": { "requires": {
"loose-envify": "^1.1.0", "loose-envify": "^1.1.0",
"object-assign": "^4.1.1", "scheduler": "^0.22.0"
"prop-types": "^15.6.2",
"scheduler": "^0.19.1"
} }
}, },
"react-error-overlay": { "react-error-overlay": {
@@ -10691,12 +10693,11 @@
} }
}, },
"scheduler": { "scheduler": {
"version": "0.19.1", "version": "0.22.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.22.0.tgz",
"integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==", "integrity": "sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ==",
"requires": { "requires": {
"loose-envify": "^1.1.0", "loose-envify": "^1.1.0"
"object-assign": "^4.1.1"
} }
}, },
"schema-utils": { "schema-utils": {
@@ -7,12 +7,12 @@
"@types/jest": "24.0.15", "@types/jest": "24.0.15",
"@types/node": "12.6.8", "@types/node": "12.6.8",
"@types/overlayscrollbars": "^1.9.0", "@types/overlayscrollbars": "^1.9.0",
"@types/react": "16.8.23", "@types/react": "^18.0.0",
"@types/react-dom": "16.8.5", "@types/react-dom": "^18.0.0",
"overlayscrollbars": "^1.11.0", "overlayscrollbars": "^1.11.0",
"overlayscrollbars-react": "^0.1.0", "overlayscrollbars-react": "^0.1.0",
"react": "^16.13.1", "react": "^18.0.0",
"react-dom": "^16.13.1", "react-dom": "^18.0.0",
"react-scripts": "3.0.1", "react-scripts": "3.0.1",
"typescript": ">=3.2.1 <3.5.0" "typescript": ">=3.2.1 <3.5.0"
}, },
+52 -51
View File
@@ -1,6 +1,6 @@
{ {
"name": "overlayscrollbars-react", "name": "overlayscrollbars-react",
"version": "0.2.1", "version": "0.3.0",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {
@@ -23,19 +23,20 @@
"dev": true "dev": true
}, },
"@types/prop-types": { "@types/prop-types": {
"version": "15.7.3", "version": "15.7.5",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
"integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==", "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
"dev": true "dev": true
}, },
"@types/react": { "@types/react": {
"version": "16.9.27", "version": "18.0.9",
"resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.27.tgz", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.9.tgz",
"integrity": "sha512-j+RvQb9w7a2kZFBOgTh+s/elCwtqWUMN6RJNdmz0ntmwpeoMHKnyhUcmYBu7Yw94Rtj9938D+TJSn6WGcq2+OA==", "integrity": "sha512-9bjbg1hJHUm4De19L1cHiW0Jvx3geel6Qczhjd0qY5VKVE2X5+x77YxAepuCwVh4vrgZJdgEJw48zrhRIeF4Nw==",
"dev": true, "dev": true,
"requires": { "requires": {
"@types/prop-types": "*", "@types/prop-types": "*",
"csstype": "^2.2.0" "@types/scheduler": "*",
"csstype": "^3.0.2"
} }
}, },
"@types/resolve": { "@types/resolve": {
@@ -47,6 +48,12 @@
"@types/node": "*" "@types/node": "*"
} }
}, },
"@types/scheduler": {
"version": "0.16.2",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
"dev": true
},
"abbrev": { "abbrev": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -656,9 +663,9 @@
"dev": true "dev": true
}, },
"csstype": { "csstype": {
"version": "2.6.10", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.10.tgz", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
"integrity": "sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==", "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==",
"dev": true "dev": true
}, },
"d": { "d": {
@@ -1184,7 +1191,8 @@
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
@@ -1205,12 +1213,14 @@
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
@@ -1225,17 +1235,20 @@
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
@@ -1352,7 +1365,8 @@
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
@@ -1364,6 +1378,7 @@
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
@@ -1378,6 +1393,7 @@
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
@@ -1385,12 +1401,14 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.3.5", "version": "2.3.5",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.0" "yallist": "^3.0.0"
@@ -1409,6 +1427,7 @@
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
@@ -1489,7 +1508,8 @@
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
@@ -1501,6 +1521,7 @@
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
@@ -1586,7 +1607,8 @@
"safe-buffer": { "safe-buffer": {
"version": "5.1.2", "version": "5.1.2",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
@@ -1622,6 +1644,7 @@
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
@@ -1641,6 +1664,7 @@
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
@@ -1684,12 +1708,14 @@
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.3", "version": "3.0.3",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
} }
} }
}, },
@@ -2570,12 +2596,6 @@
"integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
"dev": true "dev": true
}, },
"object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
"dev": true
},
"object-copy": { "object-copy": {
"version": "0.1.0", "version": "0.1.0",
"resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz", "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz",
@@ -2872,17 +2892,6 @@
"integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==", "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
"dev": true "dev": true
}, },
"prop-types": {
"version": "15.7.2",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
"integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
"dev": true,
"requires": {
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
"react-is": "^16.8.1"
}
},
"proto-list": { "proto-list": {
"version": "1.2.4", "version": "1.2.4",
"resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz", "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
@@ -2917,22 +2926,14 @@
} }
}, },
"react": { "react": {
"version": "16.13.1", "version": "18.1.0",
"resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz", "resolved": "https://registry.npmjs.org/react/-/react-18.1.0.tgz",
"integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==", "integrity": "sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"loose-envify": "^1.1.0", "loose-envify": "^1.1.0"
"object-assign": "^4.1.1",
"prop-types": "^15.6.2"
} }
}, },
"react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
"dev": true
},
"read-pkg": { "read-pkg": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@@ -1,6 +1,6 @@
{ {
"name": "overlayscrollbars-react", "name": "overlayscrollbars-react",
"version": "0.2.3", "version": "0.3.0",
"description": "OverlayScrollbars wrapper for React.", "description": "OverlayScrollbars wrapper for React.",
"keywords": [ "keywords": [
"overlayscrollbars", "overlayscrollbars",
@@ -25,12 +25,12 @@
"license": "MIT", "license": "MIT",
"devDependencies": { "devDependencies": {
"@types/overlayscrollbars": "^1.9.0", "@types/overlayscrollbars": "^1.9.0",
"@types/react": "^16.9.27", "@types/react": "^18.0.0",
"chalk": "^2.4.2", "chalk": "^2.4.2",
"gulp": "^4.0.2", "gulp": "^4.0.2",
"gulp-json-editor": "^2.5.4", "gulp-json-editor": "^2.5.4",
"overlayscrollbars": "^1.11.0", "overlayscrollbars": "^1.11.0",
"react": "^16.13.1", "react": "^18.0.0",
"rollup": "^1.32.1", "rollup": "^1.32.1",
"rollup-plugin-commonjs": "^10.1.0", "rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0", "rollup-plugin-node-resolve": "^5.2.0",
@@ -39,7 +39,7 @@
"typescript": "^3.8.3" "typescript": "^3.8.3"
}, },
"peerDependencies": { "peerDependencies": {
"react": "^16.4.0 || ^17.0.0", "react": "^16.4.0 || ^17.0.0 || ^18.0.0",
"overlayscrollbars": "^1.10.0" "overlayscrollbars": "^1.10.0"
}, },
"scripts": { "scripts": {
@@ -49,4 +49,4 @@
"build-example": "cd example && npm run build", "build-example": "cd example && npm run build",
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"
} }
} }