{"_id":"@amazing-hiring/react-custom-scrollbars","_rev":"4-cb2c6bf6a78bb1a7b9210c9ed1f29074","name":"@amazing-hiring/react-custom-scrollbars","description":"React scrollbars component","dist-tags":{"latest":"4.1.1"},"versions":{"4.1.1":{"name":"@amazing-hiring/react-custom-scrollbars","version":"4.1.1","description":"React scrollbars component","main":"lib/index.js","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","prepublish":"npm run lint && npm run test && 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/malte-wessel/react-custom-scrollbars.git"},"keywords":["scroll","scroller","scrollbars","react-component","react","custom"],"author":{"name":"Malte Wessel"},"license":"MIT","bugs":{"url":"https://github.com/malte-wessel/react-custom-scrollbars/issues"},"homepage":"https://github.com/malte-wessel/react-custom-scrollbars","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":"^0.14.0 || ^15.0.0","react-addons-test-utils":"^0.14.0 || ^15.0.0","react-dom":"^0.14.0 || ^15.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","react-dom":"^0.14.0 || ^15.0.0"},"dependencies":{"dom-css":"^2.0.0","prop-types":"^15.5.8","raf":"^3.1.0"},"gitHead":"3f80e03e8d6dfdbd57cac71a5d1f14653085ffce","_id":"@amazing-hiring/react-custom-scrollbars@4.1.1","_shasum":"db6847ca3b32727980e0f60eee40bd54e668158f","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.9.0","_npmUser":{"name":"ilnur","email":"ilnur.khalilov@gmail.com"},"dist":{"shasum":"db6847ca3b32727980e0f60eee40bd54e668158f","tarball":"https://registry.npmjs.org/@amazing-hiring/react-custom-scrollbars/-/react-custom-scrollbars-4.1.1.tgz","integrity":"sha512-x5WFwYO7P29dsfYj6nBdWoyEzLYxoAscVQsL47wtzDNtaKeN5G/RH9I5HQIRHZAC6NCjPkJZAh8jvIVfqVVXww==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBoyzktyosu5r/bZ+MC7Fm4BCTBj81gX9SDzD2qXVsRtAiAqSZKbp8FZarxlecI2ikVw8xrozmSTuJhZLsIuqVFGaQ=="}]},"maintainers":[{"name":"ilnur","email":"ilnur.khalilov@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/react-custom-scrollbars-4.1.1.tgz_1493382827251_0.28017779206857085"}}},"readme":"react-custom-scrollbars\n=========================\n\n[![npm](https://img.shields.io/badge/npm-react--custom--scrollbars-brightgreen.svg?style=flat-square)]()\n[![npm version](https://img.shields.io/npm/v/react-custom-scrollbars.svg?style=flat-square)](https://www.npmjs.com/package/react-custom-scrollbars)\n[![npm downloads](https://img.shields.io/npm/dm/react-custom-scrollbars.svg?style=flat-square)](https://www.npmjs.com/package/react-custom-scrollbars)\n\n* frictionless native browser scrolling\n* native scrollbars for mobile devices\n* [fully customizable](https://github.com/malte-wessel/react-custom-scrollbars/blob/master/docs/customization.md)\n* [auto hide](https://github.com/malte-wessel/react-custom-scrollbars/blob/master/docs/usage.md#auto-hide)\n* [auto height](https://github.com/malte-wessel/react-custom-scrollbars/blob/master/docs/usage.md#auto-height)\n* [universal](https://github.com/malte-wessel/react-custom-scrollbars/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](http://malte-wessel.github.io/react-custom-scrollbars/) · [Documentation](https://github.com/malte-wessel/react-custom-scrollbars/tree/master/docs)**\n\n## Installation\n```bash\nnpm install react-custom-scrollbars --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@3.0.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` 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/malte-wessel/react-custom-scrollbars/tree/master/docs).\n\n```javascript\nimport { Scrollbars } from 'react-custom-scrollbars';\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';\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/malte-wessel/react-custom-scrollbars/blob/master/docs/API.md)\n\n## Examples\n\nRun the simple example:\n```bash\n# Make sure that you've installed the dependencies\nnpm install\n# Move to example directory\ncd react-custom-scrollbars/examples/simple\nnpm install\nnpm start\n```\n\n## Tests\n```bash\n# Make sure that you've installed the dependencies\nnpm install\n# Run tests\nnpm test\n```\n\n### Code Coverage\n```bash\n# Run code coverage. Results can be found in `./coverage`\nnpm run test:cov\n```\n\n\n## License\n\nMIT\n","maintainers":[{"email":"r.afanaskin@yandex.ru","name":"siauz"},{"email":"denis@bolmazov.ru","name":"bolmazov"},{"email":"ilnur.khalilov@gmail.com","name":"ilnur"}],"time":{"modified":"2022-06-12T14:38:22.027Z","created":"2017-04-28T12:33:49.240Z","4.1.1":"2017-04-28T12:33:49.240Z"},"homepage":"https://github.com/malte-wessel/react-custom-scrollbars","keywords":["scroll","scroller","scrollbars","react-component","react","custom"],"repository":{"type":"git","url":"git+https://github.com/malte-wessel/react-custom-scrollbars.git"},"author":{"name":"Malte Wessel"},"bugs":{"url":"https://github.com/malte-wessel/react-custom-scrollbars/issues"},"license":"MIT","readmeFilename":"README.md"}