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