React Customizable and auto hidable Scrollbars Component based on malte-wessel work
npm install react-sb3Install Using:
``
// With NPM
npm add react-sb3
// With Yarn
yarn add react-sb3
`
| 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 | {} |
| 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 |
| 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:
`js`
import React from 'react';
import Scrollbars3 from 'react-sb3';
class component extends React.Component
constructor(props){
super(props);
this.scrollbarRoot = null;
}
render(){
return (
{/ All content here /}
);
}
};
export default component;
Example:
2 Files, 1 Component, 1 Less Style Sheet
componentFile.jsx
`js`
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 (
{/ All content here /}
);
};
export default component;
someFile.less
`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;
}