/react-full-page

Full screen scrolling with React

Primary LanguageJavaScriptMIT LicenseMIT

react-full-page

Full screen scrolling with React

npm

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>