Convert Figma logo to code with AI

malte-wessel logoreact-custom-scrollbars

React scrollbars component

3,203
578
3,203
219
View on GitHubView on NPM

Top Related Projects

KingSora's avatar

OverlayScrollbars

3,930

A javascript scrollbar plugin that hides the native scrollbars, provides custom styleable overlay scrollbars, and preserves the native functionality and feel.

Grsmto's avatar

simplebar

6,034

Custom scrollbars vanilla javascript library with native scroll, done simple, lightweight, easy to use and cross-browser.

mdbootstrap's avatar

TW-Elements

12,874

𝙃𝙪𝙜𝙚 collection of Tailwind MIT licensed (free) components, sections and templates 😎

Quick Overview

React-Custom-Scrollbars is a React component for creating custom scrollbars. It allows developers to easily implement and customize scrollbars in their React applications, providing a consistent look and feel across different browsers and platforms.

Pros

  • Highly customizable appearance and behavior
  • Cross-browser compatibility
  • Smooth scrolling experience
  • Lightweight and performant

Cons

  • Requires additional setup compared to native scrollbars
  • May not be necessary for all projects, especially those with simple scrolling needs
  • Learning curve for advanced customizations
  • Potential accessibility concerns if not implemented properly

Code Examples

  1. Basic usage:
import { Scrollbars } from 'react-custom-scrollbars';

function MyComponent() {
  return (
    <Scrollbars style={{ width: 500, height: 300 }}>
      <p>Some content</p>
    </Scrollbars>
  );
}
  1. Custom thumb and track:
import { Scrollbars } from 'react-custom-scrollbars';

function CustomScrollbars({ children }) {
  return (
    <Scrollbars
      renderThumbVertical={({ style, ...props }) =>
        <div {...props} style={{ ...style, backgroundColor: '#6b6b6b', borderRadius: 'inherit' }}/>
      }
      renderTrackVertical={({ style, ...props }) =>
        <div {...props} style={{ ...style, backgroundColor: '#f1f1f1', borderRadius: 6 }}/>
      }
    >
      {children}
    </Scrollbars>
  );
}
  1. Auto-hide scrollbars:
import { Scrollbars } from 'react-custom-scrollbars';

function AutoHideScrollbars() {
  return (
    <Scrollbars
      autoHide
      autoHideTimeout={1000}
      autoHideDuration={200}
      style={{ width: 500, height: 300 }}
    >
      <p>Content that will have auto-hiding scrollbars</p>
    </Scrollbars>
  );
}

Getting Started

  1. Install the package:

    npm install react-custom-scrollbars

  2. Import and use in your React component:

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

function MyComponent() {
  return (
    <Scrollbars style={{ width: '100%', height: '100vh' }}>
      <div>Your content here</div>
    </Scrollbars>
  );
}

export default MyComponent;

  3. Customize as needed using the various props and render methods provided by the component.

Competitor Comparisons

KingSora logo

OverlayScrollbars

3,930

A javascript scrollbar plugin that hides the native scrollbars, provides custom styleable overlay scrollbars, and preserves the native functionality and feel.

Pros of OverlayScrollbars

  • More actively maintained with recent updates
  • Supports a wider range of browsers and devices
  • Offers more customization options and features

Cons of OverlayScrollbars

  • Larger bundle size due to additional features
  • Steeper learning curve for advanced customizations

Code Comparison

OverlayScrollbars:

import OverlayScrollbars from 'overlayscrollbars';

OverlayScrollbars(document.body, {
    className: "os-theme-dark",
    scrollbars: {
        autoHide: "scroll"
    }
});

react-custom-scrollbars:

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

<Scrollbars
    style={{ width: 500, height: 300 }}
    renderThumbVertical={props => <div {...props} className="thumb-vertical"/>}
>
    {/* Your content */}
</Scrollbars>

OverlayScrollbars provides a more flexible API with extensive options, while react-custom-scrollbars offers a simpler React-specific implementation. OverlayScrollbars is better suited for complex projects requiring advanced customization, while react-custom-scrollbars is ideal for simpler React applications needing basic custom scrollbars.

Grsmto logo

simplebar

6,034

Custom scrollbars vanilla javascript library with native scroll, done simple, lightweight, easy to use and cross-browser.

Pros of simplebar

  • Supports multiple frameworks (React, Vue, Angular) and vanilla JavaScript
  • Offers automatic hiding of native scrollbars
  • Provides smooth scrolling on iOS

Cons of simplebar

  • Larger bundle size due to broader framework support
  • Less customization options for scroll thumb and track
  • May require additional setup for React projects

Code Comparison

simplebar:

import SimpleBar from 'simplebar-react';

<SimpleBar style={{ maxHeight: 300 }}>
  {/* Your content here */}
</SimpleBar>

react-custom-scrollbars:

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

<Scrollbars style={{ height: 300 }}>
  {/* Your content here */}
</Scrollbars>

Both libraries offer easy-to-use components for implementing custom scrollbars. simplebar provides a more framework-agnostic approach, while react-custom-scrollbars is specifically tailored for React applications. The code snippets demonstrate that both libraries can be implemented with minimal setup, wrapping the content that needs custom scrollbars.

react-custom-scrollbars offers more granular control over the scrollbar appearance and behavior, making it a better choice for React projects requiring extensive customization. On the other hand, simplebar's multi-framework support and automatic native scrollbar hiding make it a versatile option for projects using different technologies or requiring cross-platform consistency.

mdbootstrap logo

TW-Elements

12,874

𝙃𝙪𝙜𝙚 collection of Tailwind MIT licensed (free) components, sections and templates 😎

Pros of TW-Elements

  • Comprehensive UI component library based on Tailwind CSS
  • Includes a wide range of pre-built components and utilities
  • Active development and regular updates

Cons of TW-Elements

  • Larger bundle size due to extensive component library
  • Steeper learning curve for developers new to Tailwind CSS
  • May require more configuration for custom styling

Code Comparison

TW-Elements (Tailwind CSS class-based approach):

<div class="overflow-y-scroll h-64">
  <!-- Scrollable content -->
</div>

react-custom-scrollbars (React component-based approach):

<Scrollbars style={{ height: 300 }}>
  {/* Scrollable content */}
</Scrollbars>

TW-Elements offers a more utility-based approach using Tailwind CSS classes, while react-custom-scrollbars provides a React component with customizable scrollbars. The choice between the two depends on the project's requirements, preferred styling approach, and the need for specific scrollbar customization.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

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

NPM DownloadsLast 30 Days