:closed_book: 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

| 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

<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