1.0.0 • Published 2 years ago
paged-scroller v1.0.0
paged-scroller
A horizontal psuedo-scrolling (no scroll bar) box component. Scroll arrows can be optionally displayed, and clicking on them scrolls over one page (making sure that no items are skipped). It also optionally supports drag gestures that play nice with items that have onClick handlers.
Installation
npm install paged-scroller
or
yarn add paged-scroller
Usage
<PagedScroller>
{[...Array(20).keys()].map((i) => (
<TestItem key={i} index={i} />
))}
</PagedScroller>
Props
All props are optional.
width (string)
: Width of the container as a string. Defaults to 100% (however, the max width is the width of all the items in the scroller).itemGap (number)
: Gap between items (px).showsArrows (boolean)
: Shows the paged scrolling arrow buttons. Defaults to true on non-touch devices.enabledDrag (boolean)
: Enables scrolling with drag gestures. Defaults to true on touch devices.dragElastic (boolean)
: Enables scrolling past the edges elastically.scrollLeftButton (ReactElement)
: Provide a custom button for scrolling left.scrollRightButton (ReactElement)
: Provide a custom button for scrolling right.returnToStartButton (ReactElement)
: Provide a custom button for scrolling back to the start.
License
The MIT License (MIT)