https://github.com/closeio/react-custom-scroller

Super simple React component for creating a custom scrollbar cross-browser and cross-devices.
https://github.com/closeio/react-custom-scroller

custom-scrollbar react reactjs scrollbar scrolling

Last synced: 4 days ago
JSON representation

Super simple React component for creating a custom scrollbar cross-browser and cross-devices.

• Host: GitHub
• URL: https://github.com/closeio/react-custom-scroller
• Owner: closeio
• License: mit
• Created: 2019-10-23T12:40:30.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2024-11-25T11:32:19.000Z (about 2 months ago)
• Last Synced: 2024-12-31T21:07:41.417Z (11 days ago)
• Topics: custom-scrollbar, react, reactjs, scrollbar, scrolling
• Language: TypeScript
• Homepage:
• Size: 683 KB
• Stars: 34
• Watchers: 18
• Forks: 8
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-custom-scroller

[![NPM](https://img.shields.io/npm/v/react-custom-scroller.svg)](https://www.npmjs.com/package/react-custom-scroller) [![JavaScript Style Guide](https://img.shields.io/badge/code%20style-prettier-success)](https://prettier.io)

Super simple React component for creating a custom scrollbar cross-browser and cross-devices.

[**Check the live DEMO**](https://closeio.github.io/react-custom-scroller/).

### 

Interested in working on projects like this? [Close](https://close.com) is looking for [great engineers](https://jobs.close.com) to join our team!

## Install

```bash

yarn add react-custom-scroller

```

## Benefits

- Extremely lightweight (less than 2KB minzipped).

- It uses the native scroll events, so all the events work and are smooth (mouse wheel, space, page down, page up, arrows etc).

- No other 3rd-party dependencies.

- The performance is excellent!

## Usage

```jsx

import React from 'react';

import CustomScroller from 'react-custom-scroller';

import 'react-custom-scroller/dist/index.css';

const MyScrollableDiv = () => (

  Content goes here.

);

```

## License

MIT © [Close](https://github.com/closeio)