📕 Check out my new book Clean Code Principles And Patterns: A Software Practitioner's Handbook

semantic-ui-react-scrollbar

Horizontal and vertical scroll bar for Semantic UI React

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

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() => {(
        <Scrollbar maxScrollPosition={10} changeScrollPosition={this.changeScrollPosition} />
    )};
}

See full example in demo directory

Mandatory Scrollbar properties

changeScrollPosition: (newScrollPosition: number) => void,
maxScrollPosition: number

Optional Scrollbar properties

Optional Scrollbar property types

className: string,
orientation: 'horizontal' | 'vertical'

Default values for optional properties

className: undefined,
orientation: 'horizontal'

Keyboard actions

Styling example

<Scrollbar className="myScrollbar" .... />

Style scroll bar in CSS:

.myScrollbar .button {
    /* style buttons here */
}

.myScrollbar .track {
   /* style scroll bar track here */
}

.myScrollbar .thumb {
    /* style scroll bar thumb here */
}

License

MIT License