{"id":22096521,"url":"https://github.com/pksilen/semantic-ui-react-scrollbar","last_synced_at":"2026-03-17T17:10:39.532Z","repository":{"id":35162361,"uuid":"211284499","full_name":"pksilen/semantic-ui-react-scrollbar","owner":"pksilen","description":"Vertical and horizontal scrollbar for Semantic UI React","archived":false,"fork":false,"pushed_at":"2023-10-18T20:13:54.000Z","size":3555,"stargazers_count":2,"open_issues_count":3,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-20T05:52:00.450Z","etag":null,"topics":["horizontal","javascript-library","react","scrollbar","semantic-ui","vertical"],"latest_commit_sha":null,"homepage":"https://pksilen.github.io/semantic-ui-react-scrollbar/index.html","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/pksilen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"custom":["paypal.me/pksilen"]}},"created_at":"2019-09-27T09:30:19.000Z","updated_at":"2023-05-30T08:22:37.000Z","dependencies_parsed_at":"2024-10-23T09:30:56.251Z","dependency_job_id":"1b5213af-d436-433f-82e1-7ceb52f1dbb3","html_url":"https://github.com/pksilen/semantic-ui-react-scrollbar","commit_stats":{"total_commits":78,"total_committers":3,"mean_commits":26.0,"dds":"0.46153846153846156","last_synced_commit":"c2b071203404dccfc5b27977c51b097214ef4be8"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pksilen%2Fsemantic-ui-react-scrollbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pksilen%2Fsemantic-ui-react-scrollbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pksilen%2Fsemantic-ui-react-scrollbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pksilen%2Fsemantic-ui-react-scrollbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pksilen","download_url":"https://codeload.github.com/pksilen/semantic-ui-react-scrollbar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227482485,"owners_count":17779968,"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":["horizontal","javascript-library","react","scrollbar","semantic-ui","vertical"],"created_at":"2024-12-01T04:11:30.279Z","updated_at":"2026-03-17T17:10:39.498Z","avatar_url":"https://github.com/pksilen.png","language":"JavaScript","funding_links":["paypal.me/pksilen"],"categories":[],"sub_categories":[],"readme":"# semantic-ui-react-scrollbar\nHorizontal and vertical scroll bar for  [Semantic UI React]\n\n[![version][version-badge]][package]\n[![build][build]][circleci]\n[![Downloads][downloads]][package]\n[![coverage][coverage]][codecov]\n[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=pksilen_semantic-ui-react-scrollbar\u0026metric=alert_status)](https://sonarcloud.io/dashboard?id=pksilen_semantic-ui-react-scrollbar)\n[![Bugs](https://sonarcloud.io/api/project_badges/measure?project=pksilen_semantic-ui-react-scrollbar\u0026metric=bugs)](https://sonarcloud.io/dashboard?id=pksilen_semantic-ui-react-scrollbar)\n[![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=pksilen_semantic-ui-react-scrollbar\u0026metric=vulnerabilities)](https://sonarcloud.io/dashboard?id=pksilen_semantic-ui-react-scrollbar)\n[![MIT License][license-badge]][license]\n\n## Prerequisites\n    \"react\": \"^16.0.0\",\n    \"react-dom\": \"^16.0.0\",\n    \"semantic-ui-react\": \"^0.87.0\"\n\n## Installation\n    npm install --save semantic-ui-react-scrollbar\n    \n## Demo\nScrollbar [demo]\n    \n## Example usage\n```jsx\nimport React from 'react';\nimport Scrollbar from 'semantic-ui-react-scrollbar';\n\nclass ScrollbarExample extends React.Component {\n\n    constructor(props) {\n        super(props);\n        this.state = {\n            scrollPosition: '0'\n        };\n    }\n\n    changeScrollPosition = (newScrollPosition) =\u003e {\n        this.setState({ scrollPosition: newScrollPosition });\n    }\n\n    render() =\u003e {(\n        \u003cScrollbar maxScrollPosition={10} changeScrollPosition={this.changeScrollPosition} /\u003e\n    )};\n}\n```\n    \nSee full example in `demo` directory\n\n## Mandatory Scrollbar properties      \n    changeScrollPosition: (newScrollPosition: number) =\u003e void,\n    maxScrollPosition: number\n\n         \n## Optional Scrollbar properties\n| property             | description                                                                                                                    |\n| -------------------- | -------------------------------------------------------------------------------------------------------------------------------|\n| className            | class name(s) for HTML outer div element                                                                                       |\n| orientation          | Scroll bar orientation                                                                                                         |\n\n\n    \n## Optional Scrollbar property types\n    className: string,\n    orientation: 'horizontal' | 'vertical'\n        \n## Default values for optional properties\n    className: undefined,\n    orientation: 'horizontal'\n    \n## Keyboard actions\n| Key                  | Action                                                                                                                         |\n| -------------------- | -------------------------------------------------------------------------------------------------------------------------------|\n| ArrowUp              | Scrolls vertical scroll bar upwards                                                                                            |\n| ArrowDown            | Scrolls vertical scroll bar downwards                                                                                          |\n| ArrowLeft            | Scrolls horizontal scroll bar to the left                                                                                      |\n| ArrowRight           | Scrolls horizontal scroll bar to the right                                                                                     |\n  \n        \n## Styling example\n\n```jsx\n\u003cScrollbar className=\"myScrollbar\" .... /\u003e\n```\n    \nStyle scroll bar in CSS:\n\n```css\n.myScrollbar .button {\n    /* style buttons here */\n}\n\n.myScrollbar .track {\n   /* style scroll bar track here */\n}\n\n.myScrollbar .thumb {\n    /* style scroll bar thumb here */\n}\n```\n    \n## License\nMIT License\n\n[license-badge]: https://img.shields.io/badge/license-MIT-green\n[license]: https://github.com/pksilen/semantic-ui-react-scrollbar/blob/master/LICENSE\n[version-badge]: https://img.shields.io/npm/v/semantic-ui-react-scrollbar.svg?style=flat-square\n[package]: https://www.npmjs.com/package/semantic-ui-react-scrollbar\n[downloads]: https://img.shields.io/npm/dm/semantic-ui-react-scrollbar\n[build]: https://img.shields.io/circleci/project/github/pksilen/semantic-ui-react-scrollbar/master.svg?style=flat-square\n[circleci]: https://circleci.com/gh/pksilen/semantic-ui-react-scrollbar/tree/master\n[coverage]: https://img.shields.io/codecov/c/github/pksilen/semantic-ui-react-scrollbar/master.svg?style=flat-square\n[codecov]: https://codecov.io/gh/pksilen/semantic-ui-react-scrollbar\n[Semantic UI React]: https://react.semantic-ui.com/\n[demo]: https://pksilen.github.io/semantic-ui-react-scrollbar/index.html\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpksilen%2Fsemantic-ui-react-scrollbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpksilen%2Fsemantic-ui-react-scrollbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpksilen%2Fsemantic-ui-react-scrollbar/lists"}