Popularity
2.3
Growing
Activity
0.0
Declining
124
4
24

Monthly Downloads: 0
Programming language: JavaScript
License: MIT License
Tags: UI Components     Custom Scrollbar     React     Scrolling     Scrollbars     Custom     Scrollbar     Native    
Latest version: v2.3.3

react-gemini-scrollbar alternatives and similar libraries

Based on the "Custom Scrollbar" category

Do you think we are missing an alternative of react-gemini-scrollbar or a related project?

Add another 'Custom Scrollbar' Library

README

react-gemini-scrollbar

npm-image Known Vulnerabilities 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 {...}

License

MIT © Noel Delgado


*Note that all licence references and agreements mentioned in the react-gemini-scrollbar README section above are relevant to that project's source code only.