# canvasbar-react > React component for scrollbars customization (implemented using canvas API) Latest version **1.0.0** (published 2022-01-30) · MIT license · 0 weekly downloads ## Install ```sh npm install canvasbar-react pnpm add canvasbar-react yarn add canvasbar-react bun add canvasbar-react ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.0 | | Published | 2022-01-30 | | First published | 2021-12-12 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 144 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 2 | | Author | Andrii Prashcharuk | | Maintainers | monext | | Keywords | scroll, scroller, scrollbar, react, react-component, custom, canvas, typescript | ## Links - npm: https://www.npmjs.com/package/canvasbar-react - Repository: https://github.com/monext/canvasbar - Homepage: https://pj2m4.csb.app - Issues: https://github.com/grsmto/simplebar/issues - npm.io page: https://npm.io/package/canvasbar-react ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.0.0 (latest) — 2022-01-30 - 1.0.0-beta.2 (beta) — 2022-01-23 - 1.0.0-alpha.1 (alpha) — 2022-01-10 - 1.0.0-beta.0 — 2022-01-23 - 0.0.13 — 2022-01-08 - 0.0.12 — 2022-01-07 - 0.0.11 — 2022-01-07 - 0.0.10 — 2022-01-07 - 0.0.9 — 2022-01-05 - 0.0.8 — 2022-01-04 - 0.0.7 — 2021-12-30 - 0.0.6 — 2021-12-29 - 0.0.5 — 2021-12-28 - 0.0.4 — 2021-12-28 - 0.0.3 — 2021-12-23 - … 2 more at https://npm.io/package/canvasbar-react/versions ## README # Canvasbar React component library for scrollbars customization (implemented using canvas API). [![version](https://img.shields.io/npm/v/canvasbar-react.svg?style=flat-square)](http://npm.im/canvasbar-react) [![downloads](https://img.shields.io/npm/dm/canvasbar-react.svg?style=flat-square)](http://npm-stat.com/charts.html?package=canvasbar-react&from=2021-12-01) ### Installation **- Via npm:** `npm install canvasbar-react --save` **- Via Yarn:** `yarn add canvasbar-react` ### Sample usage ```js import { CanvasBar } from 'canvasbar-react'; const YourComponent = () => ( // your content here ); ``` ### Examples You can check out the [examples project](https://github.com/monext/canvasbar/blob/main/examples/src/App.tsx) or [live demo](https://pj2m4.csb.app/) on codesandbox. ## Documentation The `canvasbar-react` package exposes 3 items: 1. `CanvasBar` – react component for wrapping your content that needs to be displayed with custom scrollbars (if content overflows). 2. `useBodyCanvasBar` – react hook for displaying custom scrollbars in body element (if content overflows). 3. `CanvasBarConfigContext` - react context for styling scrollbars. ### CanvasBar component It has 4 custom properties: - `as` (`string`, default: `'div'`) – name of html element to use as a wrapper - `config` (`Partial`, default: `{}`) – [config object](#config-object) object for scrollbars styling - `wrapperRef` (`RefObject`) – ref for outer wrapper HTML element - `scrollableRef` (`RefObject`) – ref for inner scrollable HTML element The rest of properties are passed to wrapper element: ```js // in this case wrapper element will be
, className and onClick will be passed to it // your content here ``` `CanvasBar` component is a generic pure function component. Generic has 1 optional argument: - `Element` (extends `HTMLElement`, default value is `HTMLElement`) – you can specify it depending on what `as` prop value you use, so element related properties can be validated properly by TypeScript: ```js // in this case wrapper element will be
, onSubmit will be passed to it as='form' onSubmit={yourHandler}> // your content here ``` ### useBodyCanvasBar hook In has 1 argument: - `config` (`Partial`, default: `{}`) – [config object](#config-object) for scrollbars styling ⚠️ It's recommended to use this hook in the top level component to make sure body scrollbars are always styled properly. ⚠️ Unfortunately, it doesn't work on mobile iOS devices. It's not possible to customize or turn off root scrollbars in iOS devices ### CanvasBarConfigContext The value of this context is `Partial` object: ```js // your content here ``` You can use `CanvasBarConfigContext` for: 1. 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. 2. Styling all scrollbars inside some large component or page that contains several components that use `` component. ⚠️ If you want to style just 1 `CanvasBar` component, it's better to use `config` property of `CanvasBar`. ```js // your content here ``` ### Config object 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`, default `20`) – thumb's minimum size in px. To prevent thumb size from becoming too small when the scrollable content is too large. - `padding` (`number`, default `2`) – thumb's padding in px. To add padding between thumb and scrollbar edges. ### Changelog See changelog here: https://github.com/monext/canvasbar/releases --- _Source: https://npm.io/package/canvasbar-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._