- Notifications
You must be signed in to change notification settings - Fork0
ibitcy/react-custom-scrollbars
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
- frictionless native browser scrolling
- native scrollbars for mobile devices
- fully customizable
- auto hide
- auto height
- universal (runs on client & server)
requestAnimationFramefor 60fps- no extra stylesheets
- well tested, 100% code coverage
npm install react-custom-scrollbars --save
This assumes that you’re usingnpm package manager with a module bundler likeWebpack orBrowserify to consumeCommonJS modules.
If you don’t yet usenpm or a modern module bundler, and would rather prefer a single-fileUMD build that makesReactCustomScrollbars available as a global object, you can grab a pre-built version fromunpkg. Wedon’t recommend this approach for any serious application, as most of the libraries complementary toreact-custom-scrollbars are only available onnpm.
This is the minimal configuration.Check out the Documentation for advanced usage.
import{Scrollbars}from'react-custom-scrollbars';classAppextendsComponent{render(){return(<Scrollbarsstyle={{width:500,height:300}}><p>Some great content...</p></Scrollbars>);}}
The<Scrollbars> component is completely customizable. Check out the following code:
import{Scrollbars}from'react-custom-scrollbars';classCustomScrollbarsextendsComponent{render(){return(<ScrollbarsonScroll={this.handleScroll}onScrollFrame={this.handleScrollFrame}onScrollStart={this.handleScrollStart}onScrollStop={this.handleScrollStop}onUpdate={this.handleUpdate}renderView={this.renderView}renderTrackHorizontal={this.renderTrackHorizontal}renderTrackVertical={this.renderTrackVertical}renderThumbHorizontal={this.renderThumbHorizontal}renderThumbVertical={this.renderThumbVertical}autoHideautoHideTimeout={1000}autoHideDuration={200}autoHeightautoHeightMin={0}autoHeightMax={200}thumbMinSize={30}universal={true}{...this.props}> );}}
All properties are documented in theAPI docs
Run the simple example:
# Make sure that you've installed the dependenciesnpm install# Move to example directorycd react-custom-scrollbars/examples/simplenpm installnpm start
# Make sure that you've installed the dependenciesnpm install# Run testsnpmtest
# Run code coverage. Results can be found in `./coverage`npm run test:covMIT
About
React scrollbars component
Resources
License
Code of conduct
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Languages
- JavaScript79.4%
- TypeScript20.6%