{"id":13436697,"url":"https://github.com/noeldelgado/react-gemini-scrollbar","last_synced_at":"2025-04-07T15:08:36.601Z","repository":{"id":29308569,"uuid":"32841817","full_name":"noeldelgado/react-gemini-scrollbar","owner":"noeldelgado","description":":last_quarter_moon: React component for custom overlay-scrollbars with native scrolling mechanism.","archived":false,"fork":false,"pushed_at":"2018-10-03T04:52:39.000Z","size":58,"stargazers_count":133,"open_issues_count":8,"forks_count":24,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-31T12:08:20.647Z","etag":null,"topics":["custom-scrollbar","custom-scrollbars","gemini-scrollbar","react","reactjs","scrollbar"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/noeldelgado.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-03-25T04:04:43.000Z","updated_at":"2025-02-25T10:59:34.000Z","dependencies_parsed_at":"2022-09-06T15:02:15.998Z","dependency_job_id":null,"html_url":"https://github.com/noeldelgado/react-gemini-scrollbar","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noeldelgado%2Freact-gemini-scrollbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noeldelgado%2Freact-gemini-scrollbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noeldelgado%2Freact-gemini-scrollbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noeldelgado%2Freact-gemini-scrollbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/noeldelgado","download_url":"https://codeload.github.com/noeldelgado/react-gemini-scrollbar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247675597,"owners_count":20977376,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["custom-scrollbar","custom-scrollbars","gemini-scrollbar","react","reactjs","scrollbar"],"created_at":"2024-07-31T03:00:51.378Z","updated_at":"2025-04-07T15:08:36.571Z","avatar_url":"https://github.com/noeldelgado.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","UI Components","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e"],"sub_categories":["Uncategorized","Custom Scrollbar"],"readme":"# react-gemini-scrollbar\n[![npm-image](https://img.shields.io/npm/v/react-gemini-scrollbar.svg)](https://www.npmjs.com/package/react-gemini-scrollbar)\n[![Known Vulnerabilities](https://snyk.io/test/npm/react-gemini-scrollbar/2.3.4/badge.svg)](https://snyk.io/test/npm/react-gemini-scrollbar/2.3.4)\n![license-image](https://img.shields.io/npm/l/react-gemini-scrollbar.svg)\n\nReact component for creating custom overlay-scrollbars with native scrolling mechanism for web applications (when needed)\n\n**Important:**\n\n- It only create the custom scrollbars (bind events, etc) when the OS does not supports “overlay-scrollbars” natively, otherwise leave the scrollbars intact\n- IE9+ support\n\n*Uses [gemini-scrollbar][1] under the hood, check the gemini-scrollbar [repo][1] for more information.*\n\n## Install\n\n**NPM**\n\n```sh\nnpm install react-gemini-scrollbar --save\n```\n\n## Usage\n\n**JSX**\n\n```js\nvar GeminiScrollbar = require('react-gemini-scrollbar');\n\n\u003cGeminiScrollbar\u003e\n    \u003ch1\u003eThe content.\u003c/h1\u003e\n    \u003cp\u003eLorem ipsum dolor sit amet, consectetur adipisicing elit.\u003c/p\u003e\n\u003c/GeminiScrollbar\u003e\n```\n\n**Don’t forget the gemini stylesheet**\n\n***NPM@2 located at:***\n\n```\nnode_modules/react-gemini-scrollbar/node_modules/gemini-scrollbar/gemini-scrollbar.css\n```\n\n***NPM@3 located at:***\n\n```\nnode_modules/gemini-scrollbar/gemini-scrollbar.css\n```\n\n## Props\nname | type | default | description\n|:--- | :--- | :--- | :---\nautoshow | bool | `false` | Show scrollbars upon hovering\nforceGemini | bool | `false` | Force Gemini scrollbars even if native overlay-scrollbars are available. Useful for development.\nonResize | func | `null` | Hook by which clients can be notified of resize events.\nminThumbSize | number | `20` | Sets the minimum size of the thumbs (in pixels).\n\n## Customization\n\nYou can change the styles of the scrollbars using CSS. Ex:\n\n```css\n/* override gemini-scrollbar default styles */\n\n/* vertical scrollbar track */\n.gm-scrollbar.-vertical {\n  background-color: #f0f0f0\n}\n\n/* horizontal scrollbar track */\n.gm-scrollbar.-horizontal {\n  background-color: transparent;\n}\n\n/* scrollbar thumb */\n.gm-scrollbar .thumb {\n  background-color: rebeccapurple;\n}\n.gm-scrollbar .thumb:hover {\n  background-color: fuchsia;\n}\n```\n\nIf you want to specify different scrollbar styles for your components, one\nalternative is to pass a `className` to the component. Then you can use that\n`className` as a namespace when writing your css. Ex:\n```js\n\u003cGeminiScrollbar className='my-awesome-scrollbar'\u003e...\u003c/GeminiScrollbar\u003e\n```\n\n```css\n.my-awesome-scrollbar .gm-scrollbar.-vertical {...}\n.my-awesome-scrollbar .gm-scrollbar.-horizontal {...}\n.my-awesome-scrollbar .gm-scrollbar .thumb {...}\n```\n\n## Related\n\n- [gemini-scrollbar](https://github.com/noeldelgado/gemini-scrollbar) - Vanilla JS version\n\n## License\nMIT © [Noel Delgado][0]\n\n[0]: http://pixelia.me/\n[1]: https://github.com/noeldelgado/gemini-scrollbar\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnoeldelgado%2Freact-gemini-scrollbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnoeldelgado%2Freact-gemini-scrollbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnoeldelgado%2Freact-gemini-scrollbar/lists"}