Fullpage-React

100% React Components and vanilla JS.

Demo can be found here

A larger example setup can be found here

Basic Setup

NPM

npm install fullpage-react --save

Yarn

yarn add fullpage-react

All styling can be done via inline or stylesheets. Each component from Fullpage-React requires its own block of options

Built for UMD

You can either require this module in your own bundler/build chain or use it directly in the browser. If dropped directly into the browser, there will be a global variable named FullpageReact

---

Component Option Boilerplate

const { Fullpage, Slide, HorizontalSlider } = require('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,
  breakpoint: 375 // Disable FullpageReact and get standard scroll behavior back when this breakpoint (or below) is reached
};

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

There are two functions located on the Fullpage class. These are used for manually changing the vertical and horizontal slides via UI. An example can be found here here