https://github.com/sakhnyuk/rc-scrollbars

React scrollbars component
https://github.com/sakhnyuk/rc-scrollbars

react scroll scroll-events scrollbars

Last synced: about 2 months ago
JSON representation

React scrollbars component

• Host: GitHub
• URL: https://github.com/sakhnyuk/rc-scrollbars
• Owner: sakhnyuk
• License: mit
• Created: 2020-12-12T06:18:41.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2023-06-18T06:28:19.000Z (over 1 year ago)
• Last Synced: 2024-09-23T10:37:30.361Z (3 months ago)
• Topics: react, scroll, scroll-events, scrollbars
• Language: JavaScript
• Homepage: https://rc-scrollbars.vercel.app/
• Size: 810 KB
• Stars: 145
• Watchers: 4
• Forks: 14
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome-react-components - rc-scrollbars - [demo](https://rc-scrollbars.vercel.app/) - Customizable scrollbars with flex options and 60FPS (UI Components / Custom Scrollbar)
• awesome-react - rc-scrollbars - React scrollbars component.  (UI Components / Custom Scrollbar)
• awesome-react-components - rc-scrollbars - [demo](https://rc-scrollbars.vercel.app/) - Customizable scrollbars with flex options and 60FPS (UI Components / Custom Scrollbar)
• fucking-awesome-react-components - rc-scrollbars - 🌎 [demo](rc-scrollbars.vercel.app/) - Customizable scrollbars with flex options and 60FPS (UI Components / Custom Scrollbar)

README

        
rc-scrollbars

=========================

rejuvenated project of react-custom-scrollbars

[![npm](https://img.shields.io/badge/npm-rc--scrollbars-brightgreen.svg?style=flat-square)](https://www.npmjs.com/package/rc-scrollbars)

[![npm version](https://img.shields.io/npm/v/rc-scrollbars.svg?style=flat-square)](https://www.npmjs.com/package/rc-scrollbars)

[![npm downloads](https://img.shields.io/npm/dm/rc-scrollbars.svg?style=flat-square)](https://www.npmjs.com/package/rc-scrollbars)

* frictionless native browser scrolling

* native scrollbars for mobile devices

* [fully customizable](https://github.com/sakhnyuk/rc-scrollbars/blob/main/docs/customization.md)

* [auto hide](https://github.com/sakhnyuk/rc-scrollbars/blob/main/docs/usage.md#auto-hide)

* [auto height](https://github.com/sakhnyuk/rc-scrollbars/blob/main/docs/usage.md#auto-height)

* [universal](https://github.com/sakhnyuk/rc-scrollbars/blob/main/docs/usage.md#universal-rendering) (runs on client & server)

* `requestAnimationFrame` for 60fps

* no extra stylesheets

* well tested, 100% code coverage

**[Documentation](https://rc-scrollbars.vercel.app) · [Demos](https://rc-scrollbars.vercel.app/demo)**

## Installation

```bash

npm install rc-scrollbars --save

# OR

yarn add rc-scrollbars

```

This 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).

## Usage

This is the minimal configuration. [Check out the Documentation for advanced usage](https://rc-scrollbars.vercel.app/usage).

```javascript

import { Scrollbars } from 'rc-scrollbars';

class App extends Component {

  render() {

    return (

      

        
Some great content...

      

    );

  }

}

```


The `` component is completely customizable. Check out the following code:

```javascript

import { Scrollbars } from 'rc-scrollbars';

class CustomScrollbars extends Component {

  render() {

    return (

      

    );

  }

}

```

All properties are documented in the [API docs](https://rc-scrollbars.vercel.app/api)

## Run project locally

Run the simple example:

```bash

# Make sure that you've installed the dependencies

yarn

# Run tsc of Scrollbars in watch mode and the documentation project in dev env

yarn dev

```

## License

MIT