Semantic-ui-react-scrollbar NPM

: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 */
}