react-custom-scrollbars
Advanced tools
react-custom-scrollbars - npm Package Compare versions
Comparing version 0.1.7 to 0.1.8
| { | ||
| "name": "react-custom-scrollbars", | ||
| "version": "0.1.7", | ||
| "version": "0.1.8", | ||
| "description": "React scrollbars component", | ||
@@ -5,0 +5,0 @@ "main": "lib/index.js", |
| react-custom-scrollbars | ||
| ========================= | ||
| * lightweight react scrollbars | ||
| * inspired by noeldelgado's great [gemini-scrollbar](https://github.com/noeldelgado/gemini-scrollbar) | ||
| []() | ||
| [](https://www.npmjs.com/package/react-custom-scrollbars) | ||
| [](https://www.npmjs.com/package/react-custom-scrollbars) | ||
| * lightweight scrollbars made of 100% react goodness | ||
| * native scrolling for mobile devices | ||
| * no dependencies | ||
| * no extra stylesheets | ||
| * fully customizable | ||
| * no dependencies | ||
| * IE9+ support | ||
| * ^react@0.14.0-beta3 | ||
| * inspired by noeldelgado's great [gemini-scrollbar](https://github.com/noeldelgado/gemini-scrollbar) | ||
| * [check out the demo](http://malte-wessel.github.io/react-custom-scrollbars/) | ||
| ## Table of Contents | ||
| - [Installation](#installation) | ||
| - [Usage](#usage) | ||
| - [Customization](#customization) | ||
| - [API](#api) | ||
| - [Examples](#examples) | ||
| - [License](#license) | ||
| ## Installation | ||
@@ -23,10 +37,8 @@ ```bash | ||
| 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> | ||
| <Scrollbars style={{ width: 500, height: 300 }}> | ||
| <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> | ||
| ); | ||
@@ -48,4 +60,3 @@ } | ||
| thumbVertical={props => <div {...props} className="thumb-vertical"/>} | ||
| view={props => <div {...props} className="view"/>} | ||
| > | ||
| view={props => <div {...props} className="view"/>}> | ||
| {this.props.children} | ||
@@ -60,10 +71,8 @@ </Scrollbars> | ||
| 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> | ||
| <CustomScrollbars style={{ width: 500, height: 300 }}> | ||
| <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> | ||
| ); | ||
@@ -74,2 +83,36 @@ } | ||
| ## API | ||
| ### `<Scrollbars>` | ||
| #### Props | ||
| The following properties expect a react element to be returned. You can customize the element to your needs. | ||
| * `scrollbarHorizontal`: (Function) Horizontal scrollbar element | ||
| * `scrollbarVertical`: (Function) Vertical scrollbar element | ||
| * `thumbHorizontal`: (Function) Horizontal thumb element | ||
| * `thumbVertical`: (Function) Vertical thumb element | ||
| * `view`: (Function) The element your content will be rendered in | ||
| **Don't forget to pass the received props to your custom element. Example:** | ||
| ```javascript | ||
| class CustomScrollbars extends Component { | ||
| render() { | ||
| return ( | ||
| <Scrollbars | ||
| // Set a custom className | ||
| scrollbarHorizontal={props => <div {...props} className="scrollbar-vertical"/>} | ||
| // Customize inline styles | ||
| scrollbarVertical={({ style, ...props}) => { | ||
| return <div style={{...style, padding: 20}} {...props}/>; | ||
| }}> | ||
| {this.props.children} | ||
| </Scrollbars> | ||
| ); | ||
| } | ||
| } | ||
| ``` | ||
| ## Examples | ||
@@ -83,1 +126,5 @@ | ||
| ``` | ||
| ## License | ||
| MIT |
New alerts
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
Fixed alerts
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
Improved metrics
- Total package byte prevSize
- increased by5.57%
29282
- Number of lines in readme file
- increased by59.49%
126
No dependency changes