Skip to content

rizzomichaelg/react-fullpage

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

45 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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>
    );
  }
};

About

A react implementation of fullpage.js

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 99.9%
  • Other 0.1%