fr
@thecore/fullpage-react
npm i @thecore/fullpage-react
fr

@thecore/fullpage-react

Stateful fullpage.js inspired scrolling for React

by Michael Walker

1.1.5 (see all)License:MITTypeScript:Not Found
npm i @thecore/fullpage-react
Readme

Fullpage-React

Stateful fullpage.js inspired scrolling for React

This package is no longer maintained, and has been moved under the official fullpage.js project! Please use the official react-fullpage package!


Demo can be found here along with the source code

Starter Example

Basic Setup

// NPM
npm i fullpage-react --save

// Yarn
yarn add fullpage-react

Component Boilerplate

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> Slide 2.1 </Slide>,
  <Slide> Slide 2.2 </Slide>
];
horizontalSliderProps.slides = horizontalSlides;

const slides = [
  <Slide> Slide 1 </Slide>,
  <HorizontalSlider {...horizontalSliderProps}></HorizontalSlider>,
  <Slide> Slide 3 </Slide>
];
fullPageOptions.slides = slides;

<Fullpage {...fullPageOptions} />

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 <Fullpage/> 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

Downloads/wk

0

GitHub Stars

198

LAST COMMIT

4yrs ago

MAINTAINERS

2

CONTRIBUTORS

6

OPEN ISSUES

2

OPEN PRs

0
VersionTagPublished
1.1.5
latest
4yrs ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate