Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-custom-scrollbars

Package Overview
Dependencies
Maintainers
1
Versions
40
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-custom-scrollbars - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

2

package.json
{
"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
```
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc