https://github.com/cmswalker/fullpage-react
Stateful fullpage.js inspired scrolling for React
https://github.com/cmswalker/fullpage-react
Last synced: about 1 year ago
JSON representation
Stateful fullpage.js inspired scrolling for React
- Host: GitHub
- URL: https://github.com/cmswalker/fullpage-react
- Owner: cmswalker
- Created: 2016-07-17T15:10:20.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2018-08-03T18:49:10.000Z (over 7 years ago)
- Last Synced: 2025-03-31T10:06:25.706Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://cmswalker.github.io/fullpage-react/
- Size: 4.14 MB
- Stars: 205
- Watchers: 8
- Forks: 40
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-github-projects - fullpage-react - Stateful fullpage.js inspired scrolling for React ⭐205 `JavaScript` (📦 Legacy & Inactive Projects)
README
# **[Fullpage-React](https://cmswalker.github.io/fullpage-react/)**
Stateful fullpage.js inspired scrolling for React
## **This package is no longer maintained, and has been moved under the official [fullpage.js](https://github.com/alvarotrigo/fullpage.js/) project! Please use the official [react-fullpage](https://github.com/alvarotrigo/react-fullpage) package!**
---
### Demo can be found [here](https://cmswalker.github.io/fullpage-react/) along with the [source code](https://github.com/cmswalker/fullpage-react/blob/master/examples/fullpageReactExample.js)
### [Starter Example](https://github.com/cmswalker/fullpage-react/tree/master/examples)
### Basic Setup
```sh
// NPM
npm i fullpage-react --save
// Yarn
yarn add fullpage-react
```
#### Component Boilerplate
```jsx
import { Fullpage, Slide, HorizontalSlider } from 'fullpage-react';
const fullPageOptions = {
// for mouse/wheel events
// represents the level of force required to generate a slide change on non-mobile, 10 is default
scrollSensitivity: 7,
// for touchStart/touchEnd/mobile scrolling
// represents the level of force required to generate a slide change on mobile, 10 is default
touchSensitivity: 7,
scrollSpeed: 500,
hideScrollBars: true,
enableArrowKeys: true
};
const horizontalSliderProps = {
name: 'horizontalSlider1', // name is required
infinite: true, // enable infinite scrolling
};
const horizontalSlides = [
Slide 2.1 ,
Slide 2.2
];
horizontalSliderProps.slides = horizontalSlides;
const slides = [
Slide 1 ,
,
Slide 3
];
fullPageOptions.slides = slides;
```
#### Events API
There are two functions located on the `Fullpage` class. These are used for manually changing the vertical and horizontal slides via UI events.
There are also two optional props for `` that will send data `onSlideChangeStart` and `onSlideChangeEnd`
Sliding can be cancelled in the event that you want the user to stay fixed on a slide for some reason. If the function passed to `onSlideChangeStart` returns `true`, sliding can be cancellabe until it returns falsy.
An example can be found here [here](https://github.com/cmswalker/fullpage-react/blob/master/examples/fullpageReactExample.js)