To help you get started, we've collected the most common ways that react-custom-scrollbars is being used within popular public projects.

dnnsoftware / Dnn.AdminExperience / Modal / lib / Modal.js View on Github

props.header && _react2.default.createElement(
                    "div",
                    { className: "modal-header" },
                    _react2.default.createElement(
                        "h3",
                        null,
                        props.header
                    ),
                    props.headerChildren,
                    _react2.default.createElement("div", {
                        className: "close-modal-button",
                        dangerouslySetInnerHTML: { __html: _dnnSvgIcons.XThinIcon },
                        onClick: props.onRequestClose })
                ),
                _react2.default.createElement(
                    _reactCustomScrollbars.Scrollbars,
                    { style: scrollBarStyle },
                    _react2.default.createElement(
                        "div",
                        { style: props.contentStyle },
                        props.children
                    )
                )
            );
        }
    }]);

View more ways to use react-custom-scrollbars

react-custom-scrollbars

• 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 (
      
        <p>Some great content...</p>
      
    );
  }
}

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

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

class CustomScrollbars extends Component {
  render() {
    return (
      
    );
  }
}

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