ilp64 / react-page-scroller

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

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