@darwish/scrollbar-react NPM

Scrollbar React

A simple scrollbar component for React.

Installation

npm install @darwish/scrollbar-react

Usage

import { Scrollbar } from "@darwish/scrollbar-react";

function App() {
  return (
    <div>
      <Scrollbar height={500}>
        {[...Array(10)].map((_, index) => (
          <p key={index} style={{ width: "300px" }}>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi qui
            explicabo fugit? Recusandae enim eveniet quos magni sit earum,
            corrupti qui ducimus saepe! Quos earum sed excepturi praesentium,
            nostrum tempora.
          </p>
        ))}
      </Scrollbar>
    </div>
  );
}

Global Configuration

You can configure the scrollbar globally by passing the props to the ScrollbarProvider component.

import { GlobalScrollbarProvider, Scrollbar } from "@darwish/scrollbar-react";

function App() {
  return (
    <GlobalScrollbarProvider
      config={{
        scrollbarWidth={8}
        scrollbarRadius={99}
        trackColor="rgba(0, 0, 0, 0.2)"
        thumbColor="rgba(186, 31, 31, 0.5)"
      }}
    >
      <div>
        <Scrollbar height={500}>
          {[...Array(10)].map((_, index) => (
            <p key={index} style={{ width: "300px" }}>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi qui
              explicabo fugit? Recusandae enim eveniet quos magni sit earum,
              corrupti qui ducimus saepe! Quos earum sed excepturi praesentium,
              nostrum tempora.
            </p>
          ))}
        </Scrollbar>
      </div>
    </GlobalScrollbarProvider>
  );
}

Props

Prop	Type	Default	Description
height(optional)	number	0 (px)	The height of the scrollbar
width(optional)	number	0 (px)	The width of the scrollbar
suppressScrollX(optional)	boolean	false	Suppress horizontal scrolling
suppressScrollY(optional)	boolean	false	Suppress vertical scrolling
suppressAutoHide(optional)	boolean	false	Suppress auto-hiding of the scrollbar
trackStyle(optional)	React.CSSProperties	{}	The style of the scrollbar track
thumbStyle(optional)	React.CSSProperties	{}	The style of the scrollbar thumb
contentStyle(optional)	React.CSSProperties	{}	The style of the scrollbar content
as(optional)	React.ElementType	"div"	The element to render the scrollbar as
...otherProps(optional)	React.ComponentPropsWithRef<"div">	null	Any other props to pass to the element

Provider Props

Prop	Type	Default	Description
scrollbarWidth(optional)	number	8 (px)	The width of the scrollbar
scrollbarRadius(optional)	number	99 (px)	The radius of the scrollbar
trackColor(optional)	string	"rgba(0, 0, 0, 0.2)"	The color of the scrollbar track
thumbColor(optional)	string	"rgba(186, 31, 31, 0.5)"	The color of the scrollbar thumb