# @marudor/react-gemini-scrollbar

> React component for custom scrollbars with native scrolling

Latest version **2.1.1** (published 2016-04-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install @marudor/react-gemini-scrollbar
pnpm add @marudor/react-gemini-scrollbar
yarn add @marudor/react-gemini-scrollbar
bun add @marudor/react-gemini-scrollbar
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.1 |
| Published | 2016-04-12 |
| First published | 2016-04-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 133 |
| Author | Noel Delgado |
| Maintainers | marudor |
| Keywords | react, scrollbars, scrollbar, native, scrolling, custom |

## Links

- npm: https://www.npmjs.com/package/@marudor/react-gemini-scrollbar
- Repository: https://github.com/noeldelgado/react-gemini-scrollbar
- Issues: https://github.com/noeldelgado/react-gemini-scrollbar/issues
- npm.io page: https://npm.io/package/@marudor/react-gemini-scrollbar

## Dependencies (1)

- [gemini-scrollbar](https://npm.io/package/gemini-scrollbar.md) 1.x.x

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.1.1 (latest) — 2016-04-12

## README

# react-gemini-scrollbar
[![npm-image](https://img.shields.io/npm/v/react-gemini-scrollbar.svg?style=flat-square)](https://www.npmjs.com/package/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][1] under the hood, check the gemini-scrollbar [repo][1] for more information.*

## Install

**NPM**

```sh
npm install react-gemini-scrollbar --save
```

## Usage

**JSX**

```js
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
* `autoshow`: show scrollbars upon hovering  
* `forceGemini`: add option to force Gemini scrollbars even if native overlay-scrollbars are available


## Customization

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

```css
/* 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:
```js
<GeminiScrollbar className='my-awesome-scrollbar'>...</GeminiScrollbar>
```

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

## License
MIT © [Noel Delgado][0]

[0]: http://pixelia.me/
[1]: https://github.com/noeldelgado/gemini-scrollbar

---
_Source: https://npm.io/package/@marudor/react-gemini-scrollbar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._