React-scroller
Make your blocks scrolling easy, with a custom scroll-bar, based on native browser scroll.
It is for simple and progressive applications, works on all modern browsers.
It has a minimal load on the system, and has maximum performance, expandable and updatable
Features
- Default scroll
- Horizontal scroll
- Grab content
- Grab cursor
- Interactive scrollbar
- Variation of scrollbar positions
- Border padding and fading
- Horizontal scroll by mouse wheel
- Minimal processing
- Based on original browser scroll
- Extendable
Todo
Installation
npm i @maxweek/react-scroller
Usage
import Scroller from "@maxweek/react-scroller";
<Scroller
needBar={true}
barAltPosition={false}
horizontal={false}
grab={true}
borderFade={true}
borderPadding={true}
grabCursor={true}
className={'your-scroller-class'}
barClassName={'your-scroller-bar-class'}
barRollerClassName={'your-scroller-bar-roller-class'}
contentClassName={'your-scroller-content-class'}
>
{/* Your content */}
</Scroller>
Props
PropName | Type | Default | Description |
---|
children | ReactNode | | React child |
needBar? | boolean | false | enables scrollbar |
barAltPosition? | boolean | false | changes scrollbar position, default at right - changes to left, when horizontal enabled - changes bottom to top |
horizontal? | boolean | false | makes your box scrolling horizontal |
grab? | boolean | false | enables grabbing your scroll content |
borderFade? | boolean | false | add fadding in directions of scroll by masking |
borderPadding? | boolean | false | add padding in directions of scroll |
grabCursor? | boolean | false | enables grab cursor on hover |
className? | string | '' | class for scroller box |
barClassName? | string | '' | class for scrollbar |
barRollerClassName? | string | '' | class for scrollbar roller |
contentClassName? | string | '' | class for content wrapper |
License
Thank you for using my package!
Max Nedelko