React SB3

Usage:

Install Using:

// With NPM
npm add react-sb3

// With Yarn
yarn add react-sb3

Component PropTypes

Styling Properties

| Property | Description | Kind | Default | | --- | --- | --- | --- | | autoHide | Enables the autoHiding function for the scrollbars | bool | False | | showX | Enables the Horizontal scrollbar | bool | true | | showY | Enables the Vertical scrollbar | bool | true | | flashTime | Indicates the time ( in microseconds ) the scrollbars will be visible after a scroll movement, before auto hiding. Needs autohide enabled | number | 500 | | InitialFlashTime | The time ( in microseconds ) the scrollbars will be visible after mount, to indicate the existence of scrollbars | number | 0 | | initialFlashDelay | Indicates the time ( in microseconds ) before the autoFlash starts | number | 0 | | thumbMinSize | The minimum size ( in pixels ) of both thumbs | number | 30 | | elementClasses | The css classes to be passed to internal elements See element Classes for details | object | {} |

Events

| EventName | Description | | --- | --- | | onScrollStart | When scrolling process starts | | onScrollEnd | When scrolling process ends | | onScroll | When scrolling | | onScrollFrame | When scrolling inside animation frame process | | onTopReached | When top position is reached, won't trigger initially | | onLeftReached | When left position is reached, won't trigger initially | | onBottomReached | When bottom position is reached | | onRightReached | When right position is reached |

References

| PropName | Element | | --- | --- | | refRoot | Returns the root element | | refView | Returns the root element | | refXBar | Returns the horizontal bar element | | refYBar | Returns the vertical bar element | | refXThumb | Returns the horizontal thumb element | | refYThumb | Returns the vertical thumb element | | refAll | Returns an object with all the elements; |

Using the references:

    
    import React from 'react';
    import Scrollbars3 from 'react-sb3';
    
    class component extends React.Component
        
        constructor(props){
            super(props);
            this.scrollbarRoot = null;
        }
        
        render(){
            return (
                <Scrollbars3 refRoot={ el => { this.scrollbarRoot = el }}>
                    {/* All content here */}
                </Scrollbars3>
            );
        }
        
    };
    
    export default component;
    

Internal Elements of the Component

Root

Its the component wrapper.

View

Its the scrolling view

xBar

Its the horizontal scrollbar

yBar

Its the vertical scrollbar

xThumb

Its the horizontal thumb

yThumb

Its the vertical thumb

Styling Internal Elements

Example: 2 Files, 1 Component, 1 Less Style Sheet

componentFile.jsx

    import React from 'react';
    import Scrollbars3 from 'react-sb3';
    import './someFile.less';
    
    const component = ( ) => {
        
        const elementClasses = {
            root  : "myRootClass",
            view  : "myViewClass",
            xBar  : "myXBarClass",
            yBar  : "myYBarClass",
            xThumb: "myXThumbClass",
            xThumb: "myYThumbClass",
        }
        
        return (
            <Scrollbars3 elementClasses={elementClasses}>
                {/* All content here */}
            </Scrollbars3>
        );
        
    };
    
    export default component;
    

someFile.less

    
    .myRootClass{
        border: 1px solid red;
    }
    
    .myViewClass{
        border: 1px solid red;
    }
    
    .myXBarClass{
        //red horizontal bar
        backgroundColor: red;
        
        &.autoShowing:{
            opacity: 1
        },
        &.autoHiding:{
            opacity:0
        }
    }
    
    .myYBarClass{
        //blue horizontal bar
        backgroundColor: blue;
        
        &.autoShowing:{
            opacity: 1
        },
        &.autoHiding:{
            opacity:0
        }
    }
    
    .myXThumbClass{
        //green x thumb
        backgroundColor: green;
    }
    
    .myYThumbClass{
        //purple x thumb
        backgroundColor: purple;
    }