Full page scrolling with React

Usage no npm install needed!

<script type="module">
  import reactFullPageForwardRef from '';



Full screen scrolling with React



import React from 'react';
import { FullPage, Slide } from 'react-full-page';

export default class FullPageExample extends React.Component {
  render() {
    return (
      <FullPage controls>
          <h1>Inner slide content</h1>
          <h1>Another slide content</h1>


  • initialSlide defaults to 0
  • duration - scroll duration [ms] defaults to 700
  • controls defaults to false
    • true adds built-in controls
    • Pass React component if you want to use your own controls
  • controlsProps additional props for controls component
  • beforeChange callback executed before scroll
  • afterChange callback executed after scroll
  • scrollMode full-page or normal - defaults to full-page

Both beforeChange and afterChange will receive as parameter an object like:

  "from": 0, // the index of the slide react-full-page is scrolling _from_
  "to": 1, // the index of the slide react-full-page is scrolling _to_

Slider Controls

Basic controls props (passed automatically)

  getCurrentSlideIndex: PropTypes.func.isRequired,
  onNext: PropTypes.func.isRequired,
  onPrev: PropTypes.func.isRequired,
  scrollToSlide: PropTypes.func.isRequired,
  slidesCount: PropTypes.number.isRequired,

Default controls example

<FullPage controls controlsProps={{className: 'class-name'}}>

Custom controls example

<FullPage controls={CustomControls} controlsProps={controlsProps}>