Package Exports

react-gemini-scrollbar

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-gemini-scrollbar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-gemini-scrollbar

React component for creating custom scrollbars with native scrolling using gemini-scrollbar.

current version: 1.0.6

Installation

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>

LESS

@import (css) "node_modules/react-gemini-scrollbar/node_modules/gemini-scrollbar/gemini-scrollbar.css";

CSS

@import url(node_modules/react-gemini-scrollbar/node_modules/gemini-scrollbar/gemini-scrollbar.css);

Props

autoshow: show scrollbars upon hovering

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