React Page Scroller

Simple React component for smoothy full-page scolling.

Disclaimer

Please don't use this npm package as I may deleted if the pull request is merged in original repository.

Demo

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

Live demo: 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.

import ReactPageScroller from "react-page-scroller";

goToPage = (pageNumber) => {
  this.reactPageScroller.goToPage(pageNumber);
}

<ReactPageScroller ref={c => this.reactPageScroller = c}>
  (your components here)
</ReactPageScroller>

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 |

Dependencies

react-page-scroller requires:

• React
• lodash
• Prop Types