All Projects → malte-wessel → React Custom Scrollbars

malte-wessel / React Custom Scrollbars

Licence: mit
React scrollbars component

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Custom Scrollbars

Pickerview
🔸 A customizable alternative to UIPickerView in Swift.
Stars: ✭ 438 (-85.02%)
Mutual labels:  customizable, scrolling
preact-custom-scrollbars
⇅ Preact scrollbars component
Stars: ✭ 20 (-99.32%)
Mutual labels:  scrolling, scrollbars
njsx
A customizable and declarative interface for creating React and React Native components without JSX syntax.
Stars: ✭ 29 (-99.01%)
Mutual labels:  customizable
slimline
Minimal, customizable, fast and elegant ZSH prompt
Stars: ✭ 48 (-98.36%)
Mutual labels:  customizable
badaso
The API & platform builder, build your apps 10x faster even more, it's open source & 100% free !
Stars: ✭ 650 (-77.77%)
Mutual labels:  customizable
Celestial.UIToolkit
A custom WPF toolkit which is inspired by a lot of the current design languages, including Microsoft's Fluent Design and Google's Material Design.
Stars: ✭ 32 (-98.91%)
Mutual labels:  customizable
MinTimetable
Customizable TimeTableView for Android
Stars: ✭ 26 (-99.11%)
Mutual labels:  customizable
Refreshable
🌀Pull to refresh and load more function for UIScrollView
Stars: ✭ 31 (-98.94%)
Mutual labels:  customizable
plain-overlay
The simple library for customizable overlay which covers a page, elements or iframe-windows.
Stars: ✭ 28 (-99.04%)
Mutual labels:  customizable
custom-scrollbars
ScrollBars customization tool
Stars: ✭ 20 (-99.32%)
Mutual labels:  scrollbars
react-recycled-scrolling
Simulate normal scrolling by using only fixed number of DOM elements for large lists of items with React Hooks
Stars: ✭ 26 (-99.11%)
Mutual labels:  scrolling
Alertism
A Good Replacement For Default JavaScript Alerts Which Also Makes Good Pop-Ups
Stars: ✭ 19 (-99.35%)
Mutual labels:  customizable
react-overflow-indicator
Detect overflow and render shadows, fades, arrows, etc.
Stars: ✭ 66 (-97.74%)
Mutual labels:  scrolling
ModularPlayers
Modular desktop media widget
Stars: ✭ 28 (-99.04%)
Mutual labels:  customizable
nuclear
Polymorphic and Multilingual CMS powered by Laravel
Stars: ✭ 31 (-98.94%)
Mutual labels:  customizable
overflow-color
Automatically switch CSS html background-color to bring a smooth user experience
Stars: ✭ 40 (-98.63%)
Mutual labels:  scrolling
ngx-emoj
A simple, theme-able emoji mart/picker for angular 4+
Stars: ✭ 18 (-99.38%)
Mutual labels:  customizable
react-native-giphy
Integrate GIPHY into your React Native project (works with react-native-gifted-chat)
Stars: ✭ 25 (-99.15%)
Mutual labels:  scrolling
UUAmountBoardView
[iOS]带有数字(金额)滚动效果的UI控件
Stars: ✭ 37 (-98.73%)
Mutual labels:  customizable
srraf
Monitor scrolling and resizing without event listeners.
Stars: ✭ 26 (-99.11%)
Mutual labels:  scrolling

react-custom-scrollbars

npm npm version npm downloads

  • frictionless native browser scrolling
  • native scrollbars for mobile devices
  • fully customizable
  • auto hide
  • auto height
  • universal (runs on client & server)
  • requestAnimationFrame for 60fps
  • no extra stylesheets
  • well tested, 100% code coverage

Demos · Documentation

Installation

npm install react-custom-scrollbars --save

This assumes that you’re using npm package manager with a module bundler like Webpack or Browserify to consume CommonJS modules.

If you don’t yet use npm or a modern module bundler, and would rather prefer a single-file UMD build that makes ReactCustomScrollbars available as a global object, you can grab a pre-built version from unpkg. We don’t recommend this approach for any serious application, as most of the libraries complementary to react-custom-scrollbars are only available on npm.

Usage

This is the minimal configuration. Check out the Documentation for advanced usage.

import { Scrollbars } from 'react-custom-scrollbars';

class App extends Component {
  render() {
    return (
      <Scrollbars style={{ width: 500, height: 300 }}>
        <p>Some great content...</p>
      </Scrollbars>
    );
  }
}

The <Scrollbars> component is completely customizable. Check out the following code:

import { Scrollbars } from 'react-custom-scrollbars';

class CustomScrollbars extends Component {
  render() {
    return (
      <Scrollbars
        onScroll={this.handleScroll}
        onScrollFrame={this.handleScrollFrame}
        onScrollStart={this.handleScrollStart}
        onScrollStop={this.handleScrollStop}
        onUpdate={this.handleUpdate}
        renderView={this.renderView}
        renderTrackHorizontal={this.renderTrackHorizontal}
        renderTrackVertical={this.renderTrackVertical}
        renderThumbHorizontal={this.renderThumbHorizontal}
        renderThumbVertical={this.renderThumbVertical}
        autoHide
        autoHideTimeout={1000}
        autoHideDuration={200}
        autoHeight
        autoHeightMin={0}
        autoHeightMax={200}
        thumbMinSize={30}
        universal={true}
        {...this.props}>
    );
  }
}

All properties are documented in the API docs

Examples

Run the simple example:

# Make sure that you've installed the dependencies
npm install
# Move to example directory
cd react-custom-scrollbars/examples/simple
npm install
npm start

Tests

# Make sure that you've installed the dependencies
npm install
# Run tests
npm test

Code Coverage

# Run code coverage. Results can be found in `./coverage`
npm run test:cov

License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].