React Full Page

This is an implementation of fullpage.js in react. For the moment this is still in development and a lot of things can change.

Install

npm install --save react15-fullpage

Usage

A basic usage

importReactfrom'react';import{SectionsContainer,Section}from'react15-fullpage';letoptions={
...
};// => in the render() method of your appreturn(<SectionsContainer{...options}><Section>Page 1</Section><Section>Page 2</Section><Section>Page 3</Section></SectionsContainer>);

Fixed header and footer

In case you need a fixed header and footer you can also include the Header or Footer component

import{SectionsContainer,Section,Header,Footer}from'react15-fullpage';// => in the render() method of your appreturn(<Header><ahref="#sectionOne"className="opa">Section One</a><ahref="#sectionTwo">Section Two</a><ahref="#sectionThree">Section Three</a></Header><Footer><ahref=""className="opa">Dcoumentation</a><ahref="">ExampleSource</a><ahref="">About</a></Footer><SectionsContainer{...options}><Section>Page 1</Section><Section>Page 2</Section><Section>Page 3</Section></SectionsContainer>);

Default Props

Some of this props can be referenced with the fullpage.js options

letoptions={activeClass: 'active',// the class that is appended to the sections linksanchors: [],// the anchors for each sectionsarrowNavigation: true// use arrow keysclassName: 'SectionContainer',// the class name for the section containerdelay: 1000,// the scroll animation speednavigation: true,// use dots navigatioscrollBar: false,// use the browser default scrollbarsectionClassName: 'Section',// the section class namesectionPaddingTop: '0',// the section top paddingsectionPaddingBottom: '0',// the section bottom paddingverticalAlign: false// align the content of each section vertical};

Full example

You can find the full example here

importReactfrom'react';importReactDOMfrom'react-dom';import{SectionsContainer,Section,Header,Footer}from'../index';constapp=document.querySelector('#app');constExample=React.createClass({render(){letoptions={sectionClassName: 'section',anchors: ['sectionOne','sectionTwo','sectionThree'],scrollBar: false,navigation: true,verticalAlign: false,sectionPaddingTop: '50px',sectionPaddingBottom: '50px',arrowNavigation: true};return(<div><Header><ahref="#sectionOne">Section One</a><ahref="#sectionTwo">Section Two</a><ahref="#sectionThree">Section Three</a></Header><Footer><ahref="">Dcoumentation</a><ahref="">Example Source</a><ahref="">About</a></Footer><SectionsContainerclassName="container"{...options}><SectionclassName="custom-section"verticalAlign="true"color="#69D2E7">Page 1</Section><Sectioncolor="#A7DBD8">Page 2</Section><Sectioncolor="#E0E4CC">Page 3</Section></SectionsContainer></div>);}});ReactDOM.render(<Example/>,app);