react-custom-scrollbars

What is react-custom-scrollbars?

The react-custom-scrollbars package provides a customizable scrollbar component for React applications. It allows developers to create scrollbars with custom styles and behaviors, enhancing the user experience by providing more control over the appearance and functionality of scrollable areas.

What are react-custom-scrollbars's main functionalities?

Custom Scrollbars

This feature allows you to create a custom scrollbar for a scrollable area. You can specify the dimensions and style of the scrollbar.

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

function CustomScrollbar() {
  return (
    <Scrollbars style={{ width: 500, height: 300 }}>
      <div>Your content here</div>
    </Scrollbars>
  );
}

Custom Thumb Renderer

This feature allows you to customize the appearance of the scrollbar thumb. You can provide a custom renderer for the thumb component.

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

function CustomThumb({ style, ...props }) {
  const thumbStyle = {
    backgroundColor: 'blue',
    borderRadius: '4px'
  };
  return <div style={{ ...style, ...thumbStyle }} {...props} />;
}

function CustomScrollbar() {
  return (
    <Scrollbars renderThumbVertical={props => <CustomThumb {...props} />} style={{ width: 500, height: 300 }}>
      <div>Your content here</div>
    </Scrollbars>
  );
}

Custom Track Renderer

This feature allows you to customize the appearance of the scrollbar track. You can provide a custom renderer for the track component.

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

function CustomTrack({ style, ...props }) {
  const trackStyle = {
    backgroundColor: 'lightgray',
    borderRadius: '4px'
  };
  return <div style={{ ...style, ...trackStyle }} {...props} />;
}

function CustomScrollbar() {
  return (
    <Scrollbars renderTrackVertical={props => <CustomTrack {...props} />} style={{ width: 500, height: 300 }}>
      <div>Your content here</div>
    </Scrollbars>
  );
}

Custom View Renderer

This feature allows you to customize the appearance of the scrollable view. You can provide a custom renderer for the view component.

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

function CustomView({ style, ...props }) {
  const viewStyle = {
    padding: '10px'
  };
  return <div style={{ ...style, ...viewStyle }} {...props} />;
}

function CustomScrollbar() {
  return (
    <Scrollbars renderView={props => <CustomView {...props} />} style={{ width: 500, height: 300 }}>
      <div>Your content here</div>
    </Scrollbars>
  );
}

Other packages similar to react-custom-scrollbars

react-scrollbars-custom

react-scrollbars-custom is a highly customizable scrollbar component for React. It offers more flexibility and customization options compared to react-custom-scrollbars, including support for horizontal and vertical scrollbars, custom thumb and track components, and more.

react-perfect-scrollbar

react-perfect-scrollbar is a React wrapper for the Perfect Scrollbar library. It provides a simple and easy-to-use interface for adding custom scrollbars to your React applications. It is less customizable than react-custom-scrollbars but offers a straightforward solution for adding custom scrollbars.

react-scrollbar

react-scrollbar is another customizable scrollbar component for React. It provides basic customization options for the scrollbar's appearance and behavior. It is simpler and less feature-rich compared to react-custom-scrollbars but can be a good choice for basic use cases.

README

react-custom-scrollbars

• lightweight scrollbars made of 100% react goodness
• native scrolling for mobile devices
• no dependencies
• no extra stylesheets
• fully customizable
• IE9+ support
• ^react@0.14.0-beta3
• inspired by noeldelgado's great gemini-scrollbar
• check out the demo

Table of Contents

• Installation
• Usage
• Customization
• API
• Examples
• License

Installation

npm install react-custom-scrollbars --save

Usage

class App extends Component {
  render() {
    return (
      <Scrollbars style={{ width: 500, height: 300 }}>
        <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>
    );
  }
}

Customization

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>
    );
  }
}

class App extends Component {
  render() {
    return (
      <CustomScrollbars style={{ width: 500, height: 300 }}>
        <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>
    );
  }
}

API

<Scrollbars>

Props

The following properties expect a react element to be returned. You can customize the element to your needs.

• scrollbarHorizontal: (Function) Horizontal scrollbar element
• scrollbarVertical: (Function) Vertical scrollbar element
• thumbHorizontal: (Function) Horizontal thumb element
• thumbVertical: (Function) Vertical thumb element
• view: (Function) The element your content will be rendered in

Don't forget to pass the received props to your custom element. Example:

class CustomScrollbars extends Component {
  render() {
    return (
      <Scrollbars
        // Set a custom className
        scrollbarHorizontal={props => <div {...props} className="scrollbar-vertical"/>}
        // Customize inline styles
        scrollbarVertical={({ style, ...props}) => {
          return <div style={{...style, padding: 20}} {...props}/>;
        }}>
        {this.props.children}
      </Scrollbars>
    );
  }
}

Examples

Run the simple example:

cd react-custom-scrollbars/examples/simple
npm install
npm start

License

MIT