# react-page-scroller-qua

> Simple React component for smoothy full-page scolling

Latest version **2.0.7-beta** (published 2020-05-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-page-scroller-qua
pnpm add react-page-scroller-qua
yarn add react-page-scroller-qua
bun add react-page-scroller-qua
```

Provides the command `react-page-scroller-qua`.

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.7-beta |
| Published | 2020-05-17 |
| First published | 2020-05-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 2.1 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Andrew Qu |
| Maintainers | quuu |
| Keywords | react-component, full-page, scroll, smoothy |

## Links

- npm: https://www.npmjs.com/package/react-page-scroller-qua
- Repository: https://github.com/quuu/react-page-scroller
- Homepage: https://vikliegostaiev.github.io/react-page-scroller/
- Issues: https://github.com/vikliegostaiev/react-page-scroller/issues
- npm.io page: https://npm.io/package/react-page-scroller-qua

## Dependencies (5)

- [lodash](https://npm.io/package/lodash.md) ^4.17.15
- [gh-pages](https://npm.io/package/gh-pages.md) ^1.1.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.2
- [babel-polyfill](https://npm.io/package/babel-polyfill.md) ^6.26.0
- [react-bootstrap](https://npm.io/package/react-bootstrap.md) ^0.32.1

## Recent versions

- 2.0.7-beta (latest) — 2020-05-17

## README

# React Page Scroller (Beta)

Simple React component for smoothy full-page scolling.

### New beta version 2.0.6-beta released!!!

### Demo

You can scroll the page using mouse wheel, touch scroll or keyboard arrows.

Live demo: [vikliegostaiev.github.io/react-page-scroller](https://vikliegostaiev.github.io/react-page-scroller/)

To run demo app locally:

```
npm install
npm start
```

App will start on localhost:3000.

# Installation

via npm:

```
npm install react-page-scroller --save
```

## Usage

Example is in demo/src.

# Properties

|    Property    | Type |          Description          | Default Value |
| -------------  | ---- |          -----------          | ------- |
| animationTimer  | number | Animation duration in milliseconds | 1000 |
| blockScrollUp | bool | block scroll up | false |
| blockScrollDown | bool | block scroll up | false |
| containerHeight | number/string | height of react-page-scroller element | 100vh |
| containerWidth | number/string | width of react-page-scroller element | 100vw |
| customPageNumber | number | external selected page, number of pages should start from 0, should be combined with pageOnChange usage (see example in demo/src/FullPage.js for more information). This prop was introduced as a replacement for "goToPage" method from legacy version | |
| handleScrollUnavailable  | function | callback, is calling when someone tries to scroll over last or first child component | |
| pageOnChange  | function | callback after page was scrolled | |
| renderAllPagesOnFirstRender  | bool | flag for render all pages at first render of component | |
| transitionTimingFunction | String | CSS transition timing function name | ease-in-out |
| animationTimerBuffer | number | Animation buffer timing | 200 |

## Dependencies

react-page-scroller requires:

  - React
  - lodash
  - Prop Types


# Legacy Properties

|    Property    | Type |          Description          | Default Value |
| -------------  | ---- |          -----------          | ------- |
| animationTimer  | number | Animation duration in milliseconds | 1000 |
| transitionTimingFunction      | String | CSS transition timing function name | ease-in-out |
| pageOnChange  | function | callback on page scroll | |
| goToPage  | function | using with ref, go to selected page, number of pages must start from 0 | |
| scrollUnavailable  | function | callback, is calling when someone tries to scroll over last or first child component | |
| containerHeight | number/string | height of react-page-scroller element | 100vh |
| containerWidth | number/string | width of react-page-scroller element | 100vw |
| blockScrollUp | bool | block scroll up | false |
| blockScrollDown | bool | block scroll up | false |

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