react-gemini-scrollbar

React component for creating custom overlay-scrollbars with native scrolling mechanism for web applications (when needed)

Important:

• It only create the custom scrollbars (bind events, etc) when the OS does not supports “overlay-scrollbars” natively, otherwise leave the scrollbars intact
• IE9+ support

Uses gemini-scrollbar under the hood, check the gemini-scrollbar repo for more information.

Install

NPM

npm install react-gemini-scrollbar --save

Usage

JSX

var GeminiScrollbar = require('react-gemini-scrollbar');

<GeminiScrollbar>
    <h1>The content.</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</GeminiScrollbar>

Don’t forget the gemini stylesheet

NPM@2 located at:

node_modules/react-gemini-scrollbar/node_modules/gemini-scrollbar/gemini-scrollbar.css

NPM@3 located at:

node_modules/gemini-scrollbar/gemini-scrollbar.css

Props

name | type | default | description |:--- | :--- | :--- | :--- autoshow | bool | false | Show scrollbars upon hovering forceGemini | bool | false | Force Gemini scrollbars even if native overlay-scrollbars are available. Useful for development. onResize | func | null | Hook by which clients can be notified of resize events. minThumbSize | number | 20 | Sets the minimum size of the thumbs (in pixels).

Customization

You can change the styles of the scrollbars using CSS. Ex:

/* override gemini-scrollbar default styles */

/* vertical scrollbar track */
.gm-scrollbar.-vertical {
  background-color: #f0f0f0
}

/* horizontal scrollbar track */
.gm-scrollbar.-horizontal {
  background-color: transparent;
}

/* scrollbar thumb */
.gm-scrollbar .thumb {
  background-color: rebeccapurple;
}
.gm-scrollbar .thumb:hover {
  background-color: fuchsia;
}

If you want to specify different scrollbar styles for your components, one alternative is to pass a className to the component. Then you can use that className as a namespace when writing your css. Ex:

<GeminiScrollbar className='my-awesome-scrollbar'>...</GeminiScrollbar>

.my-awesome-scrollbar .gm-scrollbar.-vertical {...}
.my-awesome-scrollbar .gm-scrollbar.-horizontal {...}
.my-awesome-scrollbar .gm-scrollbar .thumb {...}

Related

• gemini-scrollbar - Vanilla JS version

License

MIT © Noel Delgado

2.3.3 (2017-10-11)

Patch:

• Update gemini-scrollbar dependency version
• minThumbSize option should be compatible now

Patch:

• 36 Add react 16.x.x support

2.3.2 (2017-06-08)

Patch:

• 35 Use the prop-types package instead accessing PropTypes via the main React package; add package-lock.json

2.3.1 (2017-06-06)

Patch:

• 33 Use plain JavaScript classes instead of React.createClass

2.3.0 (2017-03-06)

Feature:

• Add minThumbSize config option

2.2.0 (2017-03-06)

Feature:

• #19 Add resizer and expose onResize hook

2.1.5 (2015-07-05)

Patch:

• #27 ship compiled version

2.1.4 (2015-07-05)

Patch:

• #25 React 15.2.0 and unknown props

2.1.3 (2016-05-28)

Patch:

• Lock gemini-scrollbar dep to v1.3.x for resize event compatibility

2.1.2 (2016-05-19)

Patch:

• #20 fix / null scrollbar for componentWillUnmount

2.1.1 (2016-04-12)

Patch:

• #18 react 15 compatible

2.1.0 (2015-11-19)

Features:

• #12 Add forceGemini config option

2.0.1 (2015-10-09)

Patch:

• #10 Add react and react-dom 0.14 peer dependencies

2.0.0 (2015-10-08)

Incompatible changes:

• #6 React 0.14 update

1.1.1 (2015-05-21)

Patch:

• 28913d6 Added support for react 0.12

1.1.0 (2015-05-07)

Features:

• e9710fb Offer the compiled js version

Updates:

• e9710fb Remove browserify.transform field from package.json

1.0.9 (2015-05-06)

Updates:

• e99a010 Support for React v0.13+