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 = ; <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 */ /* horizontal scrollbar track */ /* scrollbar thumb */
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>
Related
- gemini-scrollbar - Vanilla JS version
License
MIT © Noel Delgado