React-gemini-scrollbar NPM

react-gemini-scrollbar

license-image

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 {...}