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 to0
-
duration
- scroll duration [ms] defaults to700
-
controls
defaults tofalse
-
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
ornormal
- defaults tofull-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>