It's a simple react library for a customized browser independent scrollbar for your web page
npm install react-cool-scrollbar
yarn add react-cool-scrollbar
Here you can find a demo
- Scrollbar customization (external component can be provided as scroll thumb or track)
- Customizable scrollbar width
Import ReactCoolScrollbar
component and styles
import { ReactCoolScrollbar } from "react-cool-scrollbar"; //scroller component
import "react-cool-scrollbar/dist/style.css"; //style files
You can use the component like below example-
function App() {
return (
<div className="app">
{/** .app {display: flex;} */}
<ReactCoolScrollbar>
{/** your scrollable content here */}
</ReactCoolScrollbar>
</div>
);
}
export default App;
You must import the style file to make the scrollbar work.
Make sure the parent of ReactCoolScrollbar
component must be the scroll host of the scrollable content.
Make the style property of the parent as display:flex
. This will work in most cases.
-
ref
: A ref object can be passed to the component which will point to the scroller view of the page which is adiv
element. This can be used to programatically scroll the view or anything needed as per the the requirements. -
scrollBarVisibility
: This prop can receive 3 types of conditions to make the scrollbar visible on the UI.-
always
: Scrollbar will be always visible. -
onhover
: Scrollbar will be visible on hover the scroll container. -
onscroll
: Scrollbar will be visible on scrolling the page.
-
-
scrollerWidth
: Receives anumber
as input to set the width of the scrollbar. -
className
: Can be used to style the custom scrollbar. The className will be applied on the container ofscrollTrack
andscrollThumb
-
customScrollTrack
: You can customize the scroll track by passing a component or a function that will return a component.- Example:
or
<ReactCoolScrollbar customScrollTrack={<div className="custom-scroll"></div>} > {/** your scrollable content here */} </ReactCoolScrollbar>
The passed component or function will receive the following props<ReactCoolScrollbar customScrollTrack={(props) => ( <div className="custom-scroll" {...props}></div> )} > {/** your scrollable content here */} </ReactCoolScrollbar>
handleMouseDown: (e: MouseEvent<HTMLDivElement>) => void; handleMouseUp: (e: MouseEvent<HTMLDivElement>) => void;
If you use a separate component or function then you have to pass every received prop to your component.
- Example:
-
customScrollThumb
: Same ascustomScrollTrack
prop but it will customize the scroll thumb component. This component will receive prop-
you have to be careful here that these props are passing down to your custom component properly
handleMouseDown: (e: MouseEvent<HTMLDivElement>) => void;
-