react-fullpage-lgy
v0.1.19
Published
react-fullpage-lgy
Downloads
17
Readme
Help wanted
Hey, because I am very limited with my time, I am unable to keep maitaining this project, so I am hoping to organize a group of collaborators to help me turn this into a great project.
So everyone who wants to join, please send me an email at mihail[@]subtirelu.info and I will get back to you asap.
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 react-fullpage
Usage
A basic usage
import React from 'react';
import {SectionsContainer, Section} from 'react-fullpage';
let options = {
...
};
// => in the render() method of your app
return (
<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 'react-fullpage';
// => in the render() method of your app
return (
<Header>
<a href="#sectionOne" className="opa">Section One</a>
<a href="#sectionTwo">Section Two</a>
<a href="#sectionThree">Section Three</a>
</Header>
<Footer>
<a href="" className="opa">Dcoumentation</a>
<a href="">Example Source</a>
<a href="">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
let options = {
activeClass: 'active', // the class that is appended to the sections links
anchors: [], // the anchors for each sections
arrowNavigation: true, // use arrow keys
className: 'SectionContainer', // the class name for the section container
delay: 1000, // the scroll animation speed
navigation: true, // use dots navigatio
scrollBar: false, // use the browser default scrollbar
sectionClassName: 'Section', // the section class name
sectionPaddingTop: '0', // the section top padding
sectionPaddingBottom: '0', // the section bottom padding
verticalAlign: false // align the content of each section vertical
};
Full example
You can find the full example here
import React from 'react';
import ReactDOM from 'react-dom';
import {SectionsContainer, Section, Header, Footer} from '../index';
const app = document.querySelector('#app');
const Example = React.createClass({
render() {
let options = {
sectionClassName: 'section',
anchors: ['sectionOne', 'sectionTwo', 'sectionThree'],
scrollBar: false,
navigation: true,
verticalAlign: false,
sectionPaddingTop: '50px',
sectionPaddingBottom: '50px',
arrowNavigation: true
};
return (
<div>
<Header>
<a href="#sectionOne">Section One</a>
<a href="#sectionTwo">Section Two</a>
<a href="#sectionThree">Section Three</a>
</Header>
<Footer>
<a href="">Dcoumentation</a>
<a href="">Example Source</a>
<a href="">About</a>
</Footer>
<SectionsContainer className="container" {...options}>
<Section className="custom-section" verticalAlign="true" color="#69D2E7">Page 1</Section>
<Section color="#A7DBD8">Page 2</Section>
<Section color="#E0E4CC">Page 3</Section>
</SectionsContainer>
</div>
);
}
});
ReactDOM.render(<Example/>, app);
Scroll Restoration with React Router
When using react-fullpage with react-router, you may want to use the ScrollToTopOnMount
helper component to restore scroll position when switching between routes. More information can be found here.
import React from 'react';
import {ScrollToTopOnMount, SectionsContainer, Section} from 'react-fullpage';
export default class extends React.Component {
render() {
let options = {
...
};
return (
<div>
<ScrollToTopOnMount />
<SectionsContainer {...options}>
<Section>Page 1</Section>
<Section>Page 2</Section>
<Section>Page 3</Section>
</SectionsContainer>
</div>
);
}
};