react-custom-scrollbars
Advanced tools
Comparing version 0.1.0 to 0.1.1
{ | ||
"name": "react-custom-scrollbars", | ||
"version": "0.1.0", | ||
"version": "0.1.1", | ||
"description": "React scrollbars component", | ||
@@ -5,0 +5,0 @@ "main": "lib/index.js", |
react-custom-scrollbars | ||
========================= | ||
Work in progress | ||
* lightweight react scrollbars | ||
* inspired by noeldelgado's great [gemini-scrollbar](https://github.com/noeldelgado/gemini-scrollbar) | ||
* native scrolling for mobile devices | ||
* fully customizable | ||
* IE9+ support | ||
* ^react@0.14.0-beta3 | ||
## Installation | ||
```bash | ||
npm install react-custom-scrollbars --save | ||
``` | ||
## Usage | ||
```javascript | ||
class App extends Component { | ||
render() { | ||
return ( | ||
<div style={{ width: 500, height: 300 }}> | ||
<Scrollbars> | ||
<p>Lorem ipsum dolor sit amet, ...</p> | ||
<p>Lorem ipsum dolor sit amet, ...</p> | ||
<p>Lorem ipsum dolor sit amet, ...</p> | ||
<p>Lorem ipsum dolor sit amet, ...</p> | ||
</Scrollbars> | ||
</div> | ||
); | ||
} | ||
} | ||
``` | ||
## Customization | ||
```javascript | ||
class CustomScrollbars extends Component { | ||
render() { | ||
return ( | ||
<Scrollbars | ||
className="container" | ||
scrollbarHorizontal={props => <div {...props} className="scrollbar-horizontal" />} | ||
scrollbarVertical={props => <div {...props} className="scrollbar-vertical"/>} | ||
thumbHorizontal={props => <div {...props} className="thumb-horizontal"/>} | ||
thumbVertical={props => <div {...props} className="thumb-vertical"/>} | ||
view={props => <div {...props} className="view"/>} | ||
> | ||
{this.props.children} | ||
</Scrollbars> | ||
</div> | ||
); | ||
} | ||
} | ||
class App extends Component { | ||
render() { | ||
return ( | ||
<div style={{ width: 500, height: 300 }}> | ||
<CustomScrollbars> | ||
<p>Lorem ipsum dolor sit amet, ...</p> | ||
<p>Lorem ipsum dolor sit amet, ...</p> | ||
<p>Lorem ipsum dolor sit amet, ...</p> | ||
<p>Lorem ipsum dolor sit amet, ...</p> | ||
</CustomScrollbars> | ||
</div> | ||
); | ||
} | ||
} | ||
``` | ||
## Examples | ||
Run the simple example: | ||
```bash | ||
cd react-custom-scrollbars/examples/simple | ||
npm install | ||
npm start | ||
``` |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
832810
78