{"_id":"react-custom-scrollbars-4","name":"react-custom-scrollbars-4","dist-tags":{"latest":"4.5.1"},"versions":{"4.5.1":{"name":"react-custom-scrollbars-4","version":"4.5.1","description":"React scrollbars component","main":"lib/index.js","typings":"./index.d.ts","scripts":{"clean":"rimraf lib dist","build":"babel src --out-dir lib","build:umd":"cross-env NODE_ENV=development webpack src/index.js dist/react-custom-scrollbars.js","build:umd:min":"cross-env NODE_ENV=production webpack src/index.js dist/react-custom-scrollbars.min.js","lint":"eslint src test examples","test":"cross-env NODE_ENV=test karma start","test:watch":"cross-env NODE_ENV=test karma start --auto-watch --no-single-run","test:cov":"cross-env NODE_ENV=test COVERAGE=true karma start --single-run","prepublishOnly":"npm run lint && npm run clean && npm run build && npm run build:umd && npm run build:umd:min && node ./prepublish"},"repository":{"type":"git","url":"git+https://github.com/barrenechea/react-custom-scrollbars-4.git"},"keywords":["scroll","scroller","scrollbars","react-component","react","custom"],"author":{"name":"Sebastian Barrenechea"},"license":"MIT","bugs":{"url":"https://github.com/barrenechea/react-custom-scrollbars-4/issues"},"homepage":"https://github.com/barrenechea/react-custom-scrollbars-4","devDependencies":{"babel-cli":"^6.2.0","babel-core":"^6.2.1","babel-eslint":"^6.1.2","babel-loader":"^6.2.0","babel-preset-es2015":"^6.1.18","babel-preset-react":"^6.3.13","babel-preset-stage-1":"^6.1.18","babel-register":"^6.3.13","babel-runtime":"^6.3.19","cross-env":"^3.1.3","es3ify":"^0.2.1","eslint":"^2.9.0","eslint-config-airbnb":"^9.0.1","eslint-plugin-import":"^1.10.2","eslint-plugin-jsx-a11y":"^1.2.0","eslint-plugin-react":"^5.2.2","expect":"^1.6.0","glob":"^7.0.0","isparta-loader":"^2.0.0","karma":"^1.1.1","karma-chrome-launcher":"^1.0.1","karma-cli":"^1.0.1","karma-coverage":"^1.1.0","karma-mocha":"^0.2.0","karma-mocha-reporter":"^2.0.4","karma-sourcemap-loader":"^0.3.6","karma-webpack":"^1.6.0","mocha":"^2.2.5","react":"^16.0.0","react-dom":"^16.0.0","rimraf":"^2.3.4","simulant":"^0.2.2","webpack":"^1.9.6","webpack-dev-server":"^1.8.2"},"peerDependencies":{"react":"^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0","react-dom":"^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"},"dependencies":{"dom-css":"^2.0.0","prop-types":"^15.5.10","raf":"^3.1.0"},"gitHead":"d2786175b383780c53b409de3a09d5bd433908b9","_id":"react-custom-scrollbars-4@4.5.1","_nodeVersion":"14.21.3","_npmVersion":"6.14.18","dist":{"integrity":"sha512-le32mMkrOFaE+NZ+l/IHEF9PROQp2CtJBOGNU6KLg4u0s955jh9yQhdcQVeDdZl9QTwxDQjYBut5dRHFmmG/8Q==","shasum":"da11604ac25a4629ef853ab581fcb926267d6405","tarball":"https://registry.npmjs.org/react-custom-scrollbars-4/-/react-custom-scrollbars-4-4.5.1.tgz","fileCount":32,"unpackedSize":197641,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDIigAm+XvUm+OS5tAmaCdm3iFbt+oYny1Cwws0DUeayAIgX9PGZotZ3PbdAqShYdZa/yeaE/pY3AtdAFqR9/tT2YE="}]},"_npmUser":{"name":"barrenechea","email":"sebastian@barrenechea.cl"},"directories":{},"maintainers":[{"name":"barrenechea","email":"sebastian@barrenechea.cl"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-custom-scrollbars-4_4.5.1_1739537176172_0.06107731116050186"},"_hasShrinkwrap":false}},"time":{"created":"2025-02-14T12:46:16.170Z","4.5.1":"2025-02-14T12:46:16.364Z","modified":"2025-02-14T12:46:16.640Z"},"maintainers":[{"name":"barrenechea","email":"sebastian@barrenechea.cl"}],"description":"React scrollbars component","homepage":"https://github.com/barrenechea/react-custom-scrollbars-4","keywords":["scroll","scroller","scrollbars","react-component","react","custom"],"repository":{"type":"git","url":"git+https://github.com/barrenechea/react-custom-scrollbars-4.git"},"author":{"name":"Sebastian Barrenechea"},"bugs":{"url":"https://github.com/barrenechea/react-custom-scrollbars-4/issues"},"license":"MIT","readme":"# react-custom-scrollbars-4\n\n[![npm](https://img.shields.io/badge/npm-react--custom--scrollbars--4-brightgreen.svg?style=flat-square)]()\n[![npm version](https://img.shields.io/npm/v/react-custom-scrollbars-4.svg?style=flat-square)](https://www.npmjs.com/package/react-custom-scrollbars-4)\n[![npm downloads](https://img.shields.io/npm/dm/react-custom-scrollbars-4.svg?style=flat-square)](https://www.npmjs.com/package/react-custom-scrollbars-4)\n\n- frictionless native browser scrolling\n- native scrollbars for mobile devices\n- [fully customizable](https://github.com/barrenechea/react-custom-scrollbars-4/blob/master/docs/customization.md)\n- [auto hide](https://github.com/barrenechea/react-custom-scrollbars-4/blob/master/docs/usage.md#auto-hide)\n- [auto height](https://github.com/barrenechea/react-custom-scrollbars-4/blob/master/docs/usage.md#auto-height)\n- [universal](https://github.com/barrenechea/react-custom-scrollbars-4/blob/master/docs/usage.md#universal-rendering) (runs on client & server)\n- `requestAnimationFrame` for 60fps\n- no extra stylesheets\n- well tested, 100% code coverage\n\n**[Demos](https://robpethick.github.io/react-custom-scrollbars-2/) · [Documentation](https://github.com/barrenechea/react-custom-scrollbars-4/tree/master/docs)**\n\n## Quick note\n\nThis repo is due to both the original [`react-custom-scrollbars`](https://www.npmjs.com/package/react-custom-scrollbars) and [`react-custom-scrollbars-2`](https://www.npmjs.com/package/react-custom-scrollbars-2) packages being stale. Initially to add React 19 support, this fork aims to modernize it in every way, while keeping the original APIs intact.\n\n## Installation\n\n```bash\nnpm install react-custom-scrollbars-4 --save\n```\n\nThis assumes that you’re using [npm](http://npmjs.com/) package manager with a module bundler like [Webpack](http://webpack.github.io) or [Browserify](http://browserify.org/) to consume [CommonJS modules](http://webpack.github.io/docs/commonjs.html).\n\nIf you don’t yet use [npm](http://npmjs.com/) or a modern module bundler, and would rather prefer a single-file [UMD](https://github.com/umdjs/umd) build that makes `ReactCustomScrollbars` available as a global object, you can grab a pre-built version from [unpkg](https://unpkg.com/react-custom-scrollbars-4@4.5.1/dist/react-custom-scrollbars.js). We _don’t_ recommend this approach for any serious application, as most of the libraries complementary to `react-custom-scrollbars-4` are only available on [npm](http://npmjs.com/).\n\n## Usage\n\nThis is the minimal configuration. [Check out the Documentation for advanced usage](https://github.com/barrenechea/react-custom-scrollbars-4/tree/master/docs).\n\n```javascript\nimport { Scrollbars } from \"react-custom-scrollbars-4\";\n\nclass App extends Component {\n  render() {\n    return (\n      <Scrollbars style={{ width: 500, height: 300 }}>\n        <p>Some great content...</p>\n      </Scrollbars>\n    );\n  }\n}\n```\n\nThe `<Scrollbars>` component is completely customizable. Check out the following code:\n\n```javascript\nimport { Scrollbars } from 'react-custom-scrollbars-4';\n\nclass CustomScrollbars extends Component {\n  render() {\n    return (\n      <Scrollbars\n        onScroll={this.handleScroll}\n        onScrollFrame={this.handleScrollFrame}\n        onScrollStart={this.handleScrollStart}\n        onScrollStop={this.handleScrollStop}\n        onUpdate={this.handleUpdate}\n        renderView={this.renderView}\n        renderTrackHorizontal={this.renderTrackHorizontal}\n        renderTrackVertical={this.renderTrackVertical}\n        renderThumbHorizontal={this.renderThumbHorizontal}\n        renderThumbVertical={this.renderThumbVertical}\n        autoHide\n        autoHideTimeout={1000}\n        autoHideDuration={200}\n        autoHeight\n        autoHeightMin={0}\n        autoHeightMax={200}\n        thumbMinSize={30}\n        universal={true}\n        {...this.props}>\n    );\n  }\n}\n```\n\nAll properties are documented in the [API docs](https://github.com/barrenechea/react-custom-scrollbars-4/blob/master/docs/API.md)\n\n## Examples\n\nRun the simple example:\n\n```bash\n# Make sure that you've installed the dependencies\nnpm install\n# Move to example directory\ncd react-custom-scrollbars-4/examples/simple\nnpm install\nnpm start\n```\n\n## Tests\n\n```bash\n# Make sure that you've installed the dependencies\nnpm install\n# Run tests\nnpm test\n```\n\n### Code Coverage\n\n```bash\n# Run code coverage. Results can be found in `./coverage`\nnpm run test:cov\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}