React Page Scroll

A simple React library for full page scrolling page by page. Click here for a Demo!

Installation

Using npm :

npm install react-page-scroll

Using yarn :

yarn add react-page-scroll

Features

• Full page horizontal and vertical scroll
• Works on Touchscreens (Mobile/Tablets) and Desktop
• Nested scroll
• Easy API
• Hooks
• Lightweight (12.6 kB)
• Fluid CSS based animation

Notice: When using a mobile device and scrolling within a nested scroll section, weak user gestures may result in no scrolling. A fix is in development.

Usage

Simple example:

import  React  from  'react';
import  ReactPageScroll  from  'react-page-scroll';

const  SimpleExample  = () => {
    return (<PageScroll width="100vw" height="100vh">
			<div id="page1" className='page'></div>
			<div id="page2" className='page'></div>
	    </PageScroll>)
};

export  default  SimpleExample;

Demo : Simple scroll

Nested example:

this is nested scroll example where the container scrolls vertically and the nested scroll on page 2 scrolls horizontally:

import  React  from  'react';
import  PageScroll, { NestedPageScroll }  from  'react-page-scroll';

const  SimpleNestedExample  = () => {
    return (<PageScroll width="100vw" height="100vh">
		<NestedPageScroll direction="horizontal" width="100vw" height="100vh">
			<div id="page1-1" className='page'></div>
			<div id="page1-2" className='page'></div>
		</NestedPageScroll>
		<div id="page2" className='page'></div>
	    </PageScroll>)
};

export  default  SimpleNestedExample;

Demo : Nested scroll

Documentation

Content:

• PageScroll;
• NestedPageScroll;
• Props

1. PageScroll:

Type: (children: ReactNode, Props: PageScrollProps) => ReactNode <PageScroll> is a higher level container for enabling scroll. you can set the scroll direction as horizontal or vertical, the animation duration in ms, the css animation easing and the width and height of the container. You can find more details on the Props section.

<PageScroll> automatically identifies its direct children and designates them as pages for scrolling from or to. This behavior was intended to make its usage simpler. So don't put anything that you don't consider a page as a direct child of <PageScroll>.

<PageScroll> supports nested scroll but through the <NestedPageScroll> component. Using <PageScroll> inside itself will cause an unintended behavior. Also using <NestedPageScroll> outside of a <PageScroll> will throw an error.

Example:

import  React  from  'react';
import  PageScroll from  'react-page-scroll';

const ScrollingPages = () => {
	return (<PageScroll width="100vw" height="100vh">
		    <div id="page1" className='page'></div>
		    <div id="page2" className='page'></div>
	        </PageScroll>)
}

2. NestedPageScroll:

Type: (children: ReactNode, Props: PageScrollProps) => ReactNode <NestedPageScrol> is almost identical to <pageScroll>). With two main differences:

1. It is used to enable nested scroll inside a <pageScroll>) component in case you need a different direction (to switch from vertical scrolling to horizontal scrolling) or to create a different page indicator for the nested scroll.
2. It can only be used inside a <pageScroll>). You can nest it inside itself as much as you want as long as you put all of them inside a <pageScroll>). In case you use it alone, it will throw an error.

Example:

import  React  from  'react';
import  PageScroll, { NestedPageScroll } from  'react-page-scroll';

const ScrollingPages = () => {
	return (<PageScroll width="100vw" height="100vh">
			<NestedPageScroll direction="horizontal" width="100vw" height="100vh">
				<div id="page1-1" className='page'></div>
				<div id="page1-2" className='page'></div>
			</NestedPageScroll>
			<div id="page2" className='page'></div>
	        </PageScroll>)
}

3. Props:

1. direction (Optional)(default: "vertical"):
   • description: Sets the scroll direction, supports only "vertical" or "horizontal"
   • type: "vertical" | "horizontal"

2. width (Optional)(default: "100vw"):
   • description: Sets the width of the scroll container, supports any valid CSS width value.
   • type: String

3. height (Optional)(default: "100vh"):
   • description: Sets the height of the scroll container, supports any valid CSS height value.
   • type: String

4. animationDuration ~in ms (Optional)(default: 300):
   • description: Sets the duration of the scroll animation in ms. Supports any positive number
   • type: Number

5. animationEasing (Optional)(default: "cubic-bezier(0.76, 0, 0.24, 1)"):
   • description: Sets the easing of the scroll animation. Supports any valid CSS animation easing.
   • type: String

Hooks: check this demo for an example with hooks! -- Live preview

6. onScrollInit (Optional):
   • description: A function that is called whenever the component will be handling the scroll. the function receives the current child index, number of the scrolling container children and a scroll control object to programmatically launch a scroll as a parameter. Notice: the same scroll control object will be given inside a <PageScroll> component.
   • type: (args: { currentChildIndex: number; numberOfChilds: number; scrollControl: ScrollControls; }) => void
   • scrollControl has three methods:
     • scrollTo: that receives the target you want to scroll to;
     • scrollToNext: scroll into the next child depending on the direction you've set;
     • scrollToPrevious: scroll into the previous child depending on the direction you've set;

7. onScrollStart (Optional):
   • description: A function fired when a scroll is about to happen. the function receives an object with the target index as a parameter (the index of the page it will scroll into, relative to all its siblings) . this is particularly useful if you want to do something in parallel with the scroll like setting the page indicator.
   • type: (args: { targetIndex: number }) => void

8. onScrollEnd (Optional):
   • description: A function fired when a scroll has ended. the function receives an object with the current index as a parameter (the index of the current showing page relative to all its siblings) . this is particularly useful if you want to do something after a scroll has ended.
   • type: (args: { currentIndex: number }) => void

9. onScrollCommandCede (Optional):
   • description: A function fired when the scroll will no longer be handled by the <PageScroll> or the <NestedPageScroll> component you passed the function into as it is passing control to another child or parent scroll component. the function receives an object with the last page index before ceding control as a parameter.
   • type: ({ container: HTMLElement; currentChildIndex: number; numberOfChilds: number; }) => void

Contributing

Contribution is welcome. If you have an idea or found a bug, please open an issue. For code contributions, fork the repository and submit a pull request.

License

React Page Scroll is licensed under the MIT License.