react-full-page

react-full-page

Full screen scrolling with React

DEMO

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

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

Props

• 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'}}>
  ...
</FullPage>

Custom controls example

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