React component library for scrollbars customization (implemented using canvas API).
- Via npm:
npm install canvasbar-react --save
- Via Yarn:
yarn add canvasbar-react
import { CanvasBar } from 'canvasbar-react';
const YourComponent = () => (
<CanvasBar>
// your content here
</CanvasBar>
);
You can check out the examples project or live demo on codesandbox.
The canvasbar-react
package exposes 3 items:
CanvasBar
β react component for wrapping your content that needs to be displayed with custom scrollbars (if content overflows).useBodyCanvasBar
β react hook for displaying custom scrollbars in body element (if content overflows).CanvasBarConfigContext
- react context for styling scrollbars.
It has 4 custom properties:
as
(string
, default:'div'
) β name of html element to use as a wrapperconfig
(Partial<Config>
, default:{}
) β config object object for scrollbars stylingwrapperRef
(RefObject<Element>
) β ref for outer wrapper HTML elementscrollableRef
(RefObject<HTMLDivElement>
) β ref for inner scrollable HTML element
The rest of properties are passed to wrapper element:
// in this case wrapper element will be <div>, className and onClick will be passed to it
<CanvasBar className="my-wrapper-class" onClick={someHandler}>
// your content here
</CanvasBar>
CanvasBar
component is a generic pure function component. Generic has 1 optional argument:
Element
(extendsHTMLElement
, default value isHTMLElement
) β you can specify it depending on whatas
prop value you use, so element related properties can be validated properly by TypeScript:
// in this case wrapper element will be <form>, onSubmit will be passed to it
<CanvasBar<HTMLFormElement> as='form' onSubmit={yourHandler}>
// your content here
</CanvasBar>
In has 1 argument:
config
(Partial<Config>
, default:{}
) β config object for scrollbars styling
The value of this context is Partial<Config>
object:
<CanvasBarConfigContext.Provider value={{ thumbColor: 'rgba(47, 226, 158, .8)' }}>
// your content here
</CanvasBarConfigContext.Provider>
You can use CanvasBarConfigContext
for:
- Styling all scrollbars in your project (including body scrollbars if you use
useBodyCanvasBar
hook). In this case you need to wrap your root component with this context. - Styling all scrollbars inside some large component or page that contains several components that use
<CanvasBar>
component.
CanvasBar
component, it's better to use config
property of CanvasBar
.
<CanvasBar config={{ thumbColor: 'rgba(166, 56, 220, .8)' }}>
// your content here
</CanvasBar>
Fields:
thumbColor
('string'
, default:'rgba(0, 0, 0, .5)'
) β the color of draggable scrollbar area (thumb)thumbBorderRadius
(number | 'auto'
, default:'auto'
) β thumb's border radius in px. If'auto'
, the actual value will be half of width for vertical scrollbar and half of height for horizontal scrollbar.thumbMinSize
(number
, default20
) β thumb's minimum size in px. To prevent thumb size from becoming too small when the scrollable content is too large.padding
(number
, default2
) β thumb's padding in px. To add padding between thumb and scrollbar edges.
See changelog here: https://github.com/monext/canvasbar/releases