Simple React component for smoothy full-page scolling.
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.
via npm:
npm install react-page-scroller --save
Example is in demo/src.
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 |
react-page-scroller requires:
- React
- lodash
- Prop Types
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 | |
pageOnScrollStart | function | callback on page scroll start | |
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 |