https://github.com/pksilen/semantic-ui-react-scrollbar
Vertical and horizontal scrollbar for Semantic UI React
https://github.com/pksilen/semantic-ui-react-scrollbar
horizontal javascript-library react scrollbar semantic-ui vertical
Last synced: 3 months ago
JSON representation
Vertical and horizontal scrollbar for Semantic UI React
- Host: GitHub
- URL: https://github.com/pksilen/semantic-ui-react-scrollbar
- Owner: pksilen
- License: mit
- Created: 2019-09-27T09:30:19.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-10-18T20:13:54.000Z (over 2 years ago)
- Last Synced: 2024-11-20T05:52:00.450Z (over 1 year ago)
- Topics: horizontal, javascript-library, react, scrollbar, semantic-ui, vertical
- Language: JavaScript
- Homepage: https://pksilen.github.io/semantic-ui-react-scrollbar/index.html
- Size: 3.39 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# semantic-ui-react-scrollbar
Horizontal and vertical scroll bar for [Semantic UI React]
[![version][version-badge]][package]
[![build][build]][circleci]
[![Downloads][downloads]][package]
[![coverage][coverage]][codecov]
[](https://sonarcloud.io/dashboard?id=pksilen_semantic-ui-react-scrollbar)
[](https://sonarcloud.io/dashboard?id=pksilen_semantic-ui-react-scrollbar)
[](https://sonarcloud.io/dashboard?id=pksilen_semantic-ui-react-scrollbar)
[![MIT License][license-badge]][license]
## Prerequisites
"react": "^16.0.0",
"react-dom": "^16.0.0",
"semantic-ui-react": "^0.87.0"
## Installation
npm install --save semantic-ui-react-scrollbar
## Demo
Scrollbar [demo]
## Example usage
```jsx
import React from 'react';
import Scrollbar from 'semantic-ui-react-scrollbar';
class ScrollbarExample extends React.Component {
constructor(props) {
super(props);
this.state = {
scrollPosition: '0'
};
}
changeScrollPosition = (newScrollPosition) => {
this.setState({ scrollPosition: newScrollPosition });
}
render() => {(
)};
}
```
See full example in `demo` directory
## Mandatory Scrollbar properties
changeScrollPosition: (newScrollPosition: number) => void,
maxScrollPosition: number
## Optional Scrollbar properties
| property | description |
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------|
| className | class name(s) for HTML outer div element |
| orientation | Scroll bar orientation |
## Optional Scrollbar property types
className: string,
orientation: 'horizontal' | 'vertical'
## Default values for optional properties
className: undefined,
orientation: 'horizontal'
## Keyboard actions
| Key | Action |
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------|
| ArrowUp | Scrolls vertical scroll bar upwards |
| ArrowDown | Scrolls vertical scroll bar downwards |
| ArrowLeft | Scrolls horizontal scroll bar to the left |
| ArrowRight | Scrolls horizontal scroll bar to the right |
## Styling example
```jsx
```
Style scroll bar in CSS:
```css
.myScrollbar .button {
/* style buttons here */
}
.myScrollbar .track {
/* style scroll bar track here */
}
.myScrollbar .thumb {
/* style scroll bar thumb here */
}
```
## License
MIT License
[license-badge]: https://img.shields.io/badge/license-MIT-green
[license]: https://github.com/pksilen/semantic-ui-react-scrollbar/blob/master/LICENSE
[version-badge]: https://img.shields.io/npm/v/semantic-ui-react-scrollbar.svg?style=flat-square
[package]: https://www.npmjs.com/package/semantic-ui-react-scrollbar
[downloads]: https://img.shields.io/npm/dm/semantic-ui-react-scrollbar
[build]: https://img.shields.io/circleci/project/github/pksilen/semantic-ui-react-scrollbar/master.svg?style=flat-square
[circleci]: https://circleci.com/gh/pksilen/semantic-ui-react-scrollbar/tree/master
[coverage]: https://img.shields.io/codecov/c/github/pksilen/semantic-ui-react-scrollbar/master.svg?style=flat-square
[codecov]: https://codecov.io/gh/pksilen/semantic-ui-react-scrollbar
[Semantic UI React]: https://react.semantic-ui.com/
[demo]: https://pksilen.github.io/semantic-ui-react-scrollbar/index.html