Need help with react-page-scroller?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

VikLiegostaiev
309 Stars 64 Forks MIT License 142 Commits 15 Opened issues

Description

Simple React component for smoothy full-page scolling using CSS animations. React Page Scroller

Services available

!
?

Need anything else?

Contributors list

# 374,428
JavaScr...
40 commits
# 604,733
JavaScr...
3 commits
# 160,722
JavaScr...
CSS
React
Twitch
2 commits
# 386,999
JavaScr...
reactjs
stencil...
gatsbyj...
2 commits
# 242,242
JavaScr...
CSS
Webpack
preact
2 commits
# 140,223
JavaScr...
photosh...
inline-...
React
1 commit
# 634,399
JavaScr...
1 commit
# 599,496
JavaScr...
1 commit
# 697,266
JavaScr...
1 commit
# 244,361
React
JavaScr...
CSS
kcd-edu
1 commit
# 619,842
JavaScr...
1 commit

React Page Scroller

Simple React component for smoothy full-page scolling.

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

import ReactPageScroller from 'react-page-scroller';

Example is in demo/src.

Properties

| Property | Type | Description | Default Value | | ------------- | ---- | ----------- | ------- | | animationTimer | number | Animation duration in milliseconds | 1000 | | animationTimerBuffer | number | Animation buffer timing | 200 | | blockScrollUp | bool | block scroll up | false | | blockScrollDown | bool | block scroll down | 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 | | | renderAllPagesOnFirstRender | bool | flag for render all pages at first render of component | | | transitionTimingFunction | String | CSS transition timing function name | ease-in-out | | handleScrollUnavailable | function | callback, is calling when someone tries to scroll over last or first child component | | | onBeforePageScroll | function | callback before page scroll occured (passes the index of next page in argument) | | | pageOnChange | function | callback after page was scrolled | |

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 |

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.