{"_id":"overlayscrollbars-react","_rev":"470925","name":"overlayscrollbars-react","description":"OverlayScrollbars wrapper for React.","dist-tags":{"latest":"0.2.3"},"maintainers":[{"name":"kingsora","email":"king-sora@hotmail.de"}],"time":{"modified":"2021-08-05T08:18:15.000Z","created":"2019-08-03T10:02:53.023Z","0.2.3":"2021-06-30T16:54:10.201Z","0.2.2":"2020-04-05T16:18:24.139Z","0.2.1":"2019-12-30T17:05:16.128Z","0.2.0":"2019-10-11T09:39:54.684Z","0.1.0":"2019-08-03T10:02:53.023Z"},"users":{},"author":{"name":"KingSora | Rene Haas"},"repository":{"type":"git","url":"git+https://github.com/KingSora/OverlayScrollbars.git"},"versions":{"0.2.3":{"name":"overlayscrollbars-react","version":"0.2.3","description":"OverlayScrollbars wrapper for React.","keywords":["overlayscrollbars","react"],"homepage":"https://kingsora.github.io/OverlayScrollbars","repository":{"type":"git","url":"git+https://github.com/KingSora/OverlayScrollbars.git"},"bugs":{"url":"https://github.com/KingSora/OverlayScrollbars/issues"},"main":"./dist/overlayscrollbars-react.js","module":"./dist/overlayscrollbars-react.esm.js","typings":"./dist/types/index.d.ts","author":{"name":"KingSora | Rene Haas"},"license":"MIT","devDependencies":{"@types/overlayscrollbars":"^1.9.0","@types/react":"^16.9.27","chalk":"^2.4.2","gulp":"^4.0.2","gulp-json-editor":"^2.5.4","overlayscrollbars":"^1.11.0","react":"^16.13.1","rollup":"^1.32.1","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-typescript2":"^0.22.0","shelljs":"^0.8.3","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.4.0 || ^17.0.0","overlayscrollbars":"^1.10.0"},"scripts":{"setup":"npm i && cd example && npm i && cd ..","build":"node build.js","example":"cd example && npm start","build-example":"cd example && npm run build","test":"echo \"Error: no test specified\" && exit 1"},"_id":"overlayscrollbars-react@0.2.3","_nodeVersion":"14.17.1","_npmVersion":"6.14.13","dist":{"shasum":"9a35adea5218c83675b756f9f02dfbd7a8835248","size":7530,"noattachment":false,"key":"/overlayscrollbars-react/-/overlayscrollbars-react-0.2.3.tgz","tarball":"http://registry.cnpm.dingdandao.com/overlayscrollbars-react/download/overlayscrollbars-react-0.2.3.tgz"},"_npmUser":{"name":"kingsora","email":"king-sora@hotmail.de"},"directories":{},"maintainers":[{"name":"kingsora","email":"king-sora@hotmail.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/overlayscrollbars-react_0.2.3_1625072050047_0.1981545310067545"},"_hasShrinkwrap":false,"publish_time":1625072050201,"_cnpm_publish_time":1625072050201},"0.2.2":{"name":"overlayscrollbars-react","version":"0.2.2","description":"OverlayScrollbars wrapper for React.","keywords":["overlayscrollbars","react"],"homepage":"https://kingsora.github.io/OverlayScrollbars","repository":{"type":"git","url":"git+https://github.com/KingSora/OverlayScrollbars.git"},"bugs":{"url":"https://github.com/KingSora/OverlayScrollbars/issues"},"main":"./dist/overlayscrollbars-react.js","module":"./dist/overlayscrollbars-react.esm.js","typings":"./dist/types/index.d.ts","author":{"name":"KingSora | Rene Haas"},"license":"MIT","devDependencies":{"@types/overlayscrollbars":"^1.9.0","@types/react":"^16.9.27","chalk":"^2.4.2","gulp":"^4.0.2","gulp-json-editor":"^2.5.4","overlayscrollbars":"^1.11.0","react":"^16.13.1","rollup":"^1.32.1","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-typescript2":"^0.22.0","shelljs":"^0.8.3","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.4.0","overlayscrollbars":"^1.10.0"},"scripts":{"setup":"npm i && cd example && npm i && cd ..","build":"node build.js","example":"cd example && npm start","build-example":"cd example && npm run build","test":"echo \"Error: no test specified\" && exit 1"},"_id":"overlayscrollbars-react@0.2.2","_npmVersion":"6.5.0","_nodeVersion":"10.16.0","_npmUser":{"name":"kingsora","email":"king-sora@hotmail.de"},"dist":{"shasum":"330b5d298090d714af660ef45a73d89964f9172e","size":7506,"noattachment":false,"key":"/overlayscrollbars-react/-/overlayscrollbars-react-0.2.2.tgz","tarball":"http://registry.cnpm.dingdandao.com/overlayscrollbars-react/download/overlayscrollbars-react-0.2.2.tgz"},"maintainers":[{"name":"kingsora","email":"king-sora@hotmail.de"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/overlayscrollbars-react_0.2.2_1586103503998_0.22114862642911093"},"_hasShrinkwrap":false,"publish_time":1586103504139,"_cnpm_publish_time":1586103504139},"0.2.1":{"name":"overlayscrollbars-react","version":"0.2.1","description":"OverlayScrollbars wrapper for React.","keywords":["overlayscrollbars","react"],"homepage":"https://kingsora.github.io/OverlayScrollbars","repository":{"type":"git","url":"git+https://github.com/KingSora/OverlayScrollbars.git"},"bugs":{"url":"https://github.com/KingSora/OverlayScrollbars/issues"},"browser":"./dist/overlayscrollbars-react.js","main":"./dist/overlayscrollbars-react.js","module":"./dist/overlayscrollbars-react.esm.js","typings":"./dist/types/index.d.ts","author":{"name":"KingSora | Rene Haas"},"license":"MIT","devDependencies":{"@types/overlayscrollbars":"^1.9.0","@types/react":"^16.4.0","chalk":"^2.4.2","gulp":"^4.0.2","gulp-json-editor":"^2.5.2","overlayscrollbars":"^1.9.0","react":"^16.4.0","rollup":"^1.17.0","rollup-plugin-commonjs":"^10.0.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-typescript2":"^0.22.0","shelljs":"^0.8.3","typescript":"^3.0.3"},"peerDependencies":{"react":"^16.4.0","overlayscrollbars":"^1.10.0"},"scripts":{"setup":"npm i && cd example && npm i && cd ..","build":"node build.js","example":"cd example && npm start","build-example":"cd example && npm run build","test":"echo \"Error: no test specified\" && exit 1"},"_id":"overlayscrollbars-react@0.2.1","_npmVersion":"6.5.0","_nodeVersion":"10.16.0","_npmUser":{"name":"kingsora","email":"king-sora@hotmail.de"},"dist":{"shasum":"fe742d71b1772fa67312636b4a729e0c7246426a","size":6781,"noattachment":false,"key":"/overlayscrollbars-react/-/overlayscrollbars-react-0.2.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/overlayscrollbars-react/download/overlayscrollbars-react-0.2.1.tgz"},"maintainers":[{"name":"kingsora","email":"king-sora@hotmail.de"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/overlayscrollbars-react_0.2.1_1577725515983_0.14622679530363336"},"_hasShrinkwrap":false,"publish_time":1577725516128,"_cnpm_publish_time":1577725516128},"0.2.0":{"name":"overlayscrollbars-react","version":"0.2.0","description":"OverlayScrollbars wrapper for React.","keywords":["overlayscrollbars","react"],"homepage":"https://kingsora.github.io/OverlayScrollbars","repository":{"type":"git","url":"git+https://github.com/KingSora/OverlayScrollbars.git"},"bugs":{"url":"https://github.com/KingSora/OverlayScrollbars/issues"},"main":"./dist/overlayscrollbars-react.js","module":"./dist/overlayscrollbars-react.esm.js","typings":"./dist/types/index.d.ts","author":{"name":"KingSora | Rene Haas"},"license":"MIT","devDependencies":{"@types/overlayscrollbars":"^1.9.0","@types/react":"^16.4.0","chalk":"^2.4.2","gulp":"^4.0.2","gulp-json-editor":"^2.5.2","overlayscrollbars":"^1.9.0","react":"^16.4.0","rollup":"^1.17.0","rollup-plugin-commonjs":"^10.0.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-typescript2":"^0.22.0","shelljs":"^0.8.3","typescript":"^3.0.3"},"peerDependencies":{"react":"^16.4.0","overlayscrollbars":"^1.10.0"},"scripts":{"setup":"npm i && cd example && npm i && cd ..","build":"node build.js","example":"cd example && npm start","build-example":"cd example && npm run build","test":"echo \"Error: no test specified\" && exit 1"},"_id":"overlayscrollbars-react@0.2.0","_npmVersion":"6.5.0","_nodeVersion":"10.16.0","_npmUser":{"name":"kingsora","email":"king-sora@hotmail.de"},"dist":{"shasum":"5f30f25abb22db94433269256e22cc4a5f1a360e","size":6771,"noattachment":false,"key":"/overlayscrollbars-react/-/overlayscrollbars-react-0.2.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/overlayscrollbars-react/download/overlayscrollbars-react-0.2.0.tgz"},"maintainers":[{"name":"kingsora","email":"king-sora@hotmail.de"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/overlayscrollbars-react_0.2.0_1570786794592_0.8678172233009138"},"_hasShrinkwrap":false,"publish_time":1570786794684,"_cnpm_publish_time":1570786794684},"0.1.0":{"name":"overlayscrollbars-react","version":"0.1.0","description":"OverlayScrollbars wrapper for React.","keywords":["overlayscrollbars","react"],"homepage":"https://kingsora.github.io/OverlayScrollbars","repository":{"type":"git","url":"git+https://github.com/KingSora/OverlayScrollbars.git"},"bugs":{"url":"https://github.com/KingSora/OverlayScrollbars/issues"},"main":"./dist/overlayscrollbars-react.js","module":"./dist/overlayscrollbars-react.esm.js","typings":"./dist/types/index.d.ts","author":{"name":"KingSora | Rene Haas"},"license":"MIT","devDependencies":{"@types/overlayscrollbars":"^1.9.0","@types/react":"^16.4.0","chalk":"^2.4.2","gulp":"^4.0.2","gulp-json-editor":"^2.5.2","overlayscrollbars":"^1.9.0","react":"^16.4.0","rollup":"^1.17.0","rollup-plugin-commonjs":"^10.0.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-typescript2":"^0.22.0","shelljs":"^0.8.3","typescript":"^3.0.3"},"peerDependencies":{"react":"^16.4.0","overlayscrollbars":"^1.9.0"},"scripts":{"setup":"npm i && cd example && npm i && cd ..","build":"node build.js","example":"cd example && npm start","build-example":"cd example && npm run build","test":"echo \"Error: no test specified\" && exit 1"},"_id":"overlayscrollbars-react@0.1.0","_npmVersion":"6.5.0","_nodeVersion":"10.16.0","_npmUser":{"name":"kingsora","email":"king-sora@hotmail.de"},"dist":{"shasum":"54ae394b07fc9ef9c3ce084b7f0dcbad7569605f","size":6165,"noattachment":false,"key":"/overlayscrollbars-react/-/overlayscrollbars-react-0.1.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/overlayscrollbars-react/download/overlayscrollbars-react-0.1.0.tgz"},"maintainers":[{"name":"kingsora","email":"king-sora@hotmail.de"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/overlayscrollbars-react_0.1.0_1564826572924_0.0011142581954739494"},"_hasShrinkwrap":false,"publish_time":1564826573023,"_cnpm_publish_time":1564826573023}},"readme":"
\r\n The official OverlayScrollbars wrapper for React.\r\n
\r\n\r\n## Installation\r\n```sh\r\nnpm install overlayscrollbars-react\r\n```\r\n\r\n## Peer Dependencies\r\nOverlayScrollbars for React has the following **peer dependencies**:\r\n- The vanilla JavaScript library: [overlayscrollbars](https://www.npmjs.com/package/overlayscrollbars) \r\n```\r\nnpm install overlayscrollbars\r\n```\r\n- The React framework: [react](https://www.npmjs.com/package/react)\r\n```\r\nnpm install react\r\n```\r\n\r\n## TypeScript\r\n- In case you are using TypeScript, you have to install the [OverlayScrollbars typings](https://www.npmjs.com/package/@types/overlayscrollbars):\r\n```\r\nnpm install @types/overlayscrollbars\r\n```\r\nSince this wrapper is written in TypeScript it comes with its generated typings. \r\nCheck out the [recommended](https://github.com/KingSora/OverlayScrollbars#typescript) **tsconfig.json** options.\r\n\r\n## Usage\r\n#### CSS\r\nYou have to import the `OverlayScrollbars.css` by yourself. \r\nThe component **doesn't** do it for you as the styles are **global styles**! \r\nThere 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:\r\n```js\r\nimport 'overlayscrollbars/css/OverlayScrollbars.css';\r\n```\r\n\r\n#### Import\r\nSimply import the component into your file(s):\r\n```js\r\nimport { OverlayScrollbarsComponent } from 'overlayscrollbars-react';\r\n```\r\n\r\n#### Template\r\nAfter the import you can use it in JSX:\r\n```jsx\r\n\r\n example content\r\n\r\n```\r\n\r\n#### Properties\r\nTwo properties are accepted: `options` and `extensions`.\r\n- The `options` property accepts a `object` and can be changed at any point in time, and the plugin will adapt.\r\n- The `extensions` property accepts a `string`, `string array` or `object` and is only taken into account if the component gets mounted.\r\n\r\n```jsx\r\n\r\n\r\n```\r\nYou 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).\r\n\r\n#### Instance\r\nIf you get the component reference, it provides two methods: `osInstance()` and `osTarget()`.\r\n- The `osInstance()` method returns the OverlayScrollbars `instance` of the component, or `null` if the instance isn't initialized yet or already destroyed.\r\n- 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.\r\n\r\n## Example App\r\nIn case you need a example app for reference, you can use the example app in this repo(`example folder`):\r\n- [Live example](https://kingsora.github.io/OverlayScrollbars/frameworks/react/)\r\n- [Source code](https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-react/example)\r\n\r\nIf you wanna build the example app, run these commands:\r\n```sh\r\nnpm run setup\r\nnpm run build\r\nnpm run example\r\n```\r\n\r\n## License\r\n\r\nMIT ","_attachments":{},"homepage":"https://kingsora.github.io/OverlayScrollbars","bugs":{"url":"https://github.com/KingSora/OverlayScrollbars/issues"},"license":"MIT"}
![\"React\"](\"https://kingsora.github.io/OverlayScrollbars/frameworks/react/logo.svg\"){kind=logo}
\r\n ![\"OverlayScrollbars\"](\"https://kingsora.github.io/OverlayScrollbars/design/logo.svg\"){kind=logo}
\r\n![\"React\"](\"https://img.shields.io/badge/React-%5E16.4.0-61dafb?style=flat-square&logo=React\"){kind=icon}
\r\n ![\"OverlayScrollbars\"](\"https://img.shields.io/badge/OverlayScrollbars-%5E1.10.0-36befd?style=flat-square\"){kind=icon}
\r\n ![\"Downloads\"](\"https://img.shields.io/npm/dt/overlayscrollbars-react.svg?style=flat-square\")
\r\n ![\"License\"](\"https://img.shields.io/github/license/kingsora/overlayscrollbars.svg?style=flat-square\")
\r\n