# paged-scroller

> A horizontal psuedo-scrolling (no scroll bar) box component.

Latest version **1.0.0** (published 2022-01-31) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install paged-scroller
pnpm add paged-scroller
yarn add paged-scroller
bun add paged-scroller
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2022-01-31 |
| First published | 2022-01-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 549.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Evan Kerik |
| Maintainers | ekerik220 |

## Links

- npm: https://www.npmjs.com/package/paged-scroller
- npm.io page: https://npm.io/package/paged-scroller

## Dependencies (3)

- [web-vitals](https://npm.io/package/web-vitals.md) ^2.1.3
- [react-icons](https://npm.io/package/react-icons.md) ^4.3.1
- [@react-hook/size](https://npm.io/package/@react-hook/size.md) ^2.1.2

## Recent versions

- 1.0.0 (latest) — 2022-01-31
- 0.1.0 — 2022-01-26

## README

![example](https://user-images.githubusercontent.com/5779535/151152606-5f4f7e64-e9db-491d-af25-bb393df50d26.gif)


# 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

```tsx
<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)

---
_Source: https://npm.io/package/paged-scroller · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._