/react-fullpage

Official React.js wrapper for fullPage.js https://alvarotrigo.com/react-fullpage/

Primary LanguageJavaScriptMIT LicenseMIT

react-fullpage

preview

Official React wrapper for the fullpage.js library

react-fullpage version

Table of Contents

Installation

npm install @fullpage/react-fullpage

This will install the wrapper as well as fullpage.js

License

Commercial license

Although react-fullpage is under the MIT license as can be seen on the LICENSE file, notice fullPage.js library is under GPLv3. Therefore you'll need to purchase a Commercial License for fullPage.js if you want to use fullPage to develop commercial sites, themes, projects, and applications. [Purchase a Fullpage Commercial License]

Open source license

If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use fullPage under the terms of the GPLv3.

The credit comments in the JavaScript and CSS files should be kept intact (even after combination or minification)

Read more about fullPage's license.

Usage

This wrapper creates a <ReactFullpage /> component. It exposes a render-prop API so markup can remain the same across fullpage.js libraries. The render prop accepts 1 parameter in its callback which contains the component's react properties state, context, etc.

Server Side Rendering

SSR is supported however the server-rendered html will not be styled, this is because window must be present in order to properly set height + width of slides. So long as you rehydrate your fullpage component in the browser environment, regular styles will be applied.

It is also worth noting that when using SSR or a framework such as next.js, you should import the commonjs lib vs the standard umd lib, so your import statement should read

import ReactFullpage from '@fullpage/react-fullpage/dist/react-fullpage-commonjs';

Examples

In-depth examples can be found here

Quickstart Example:

import React from 'react';
import ReactDOM from 'react-dom';
import ReactFullpage from '@fullpage/react-fullpage';

const Fullpage = () => (
  <ReactFullpage
    render={({ state, fullpageApi }) => {
      return (
        <ReactFullpage.Wrapper>
          <div className="section">
            <p>Section 1 (welcome to fullpage.js)</p>
            <button onClick={() => fullpageApi.moveSectionDown()}>Click me to move down</button>
          </div>
          <div className="section">
            <p>Section 2</p>
          </div>
        </ReactFullpage.Wrapper>
      );
    }}
  />
);

ReactDOM.render(<Fullpage />, document.getElementById('react-root'));

Fullpage.js Extension Example:

import React from 'react';
import ReactDOM from 'react-dom';
import 'fullpage.js/vendors/scrolloverflow' // Optional. When using the fullPage.js option scrollOverflow:true

// Optional. When using add-on fullpage extensions
//import './fullpage.scrollHorizontally.min'

import ReactFullpage from '@fullpage/react-fullpage';

const Fullpage = () => (
  <ReactFullpage
    render={({ state, fullpageApi }) => {
      return (
        <ReactFullpage.Wrapper>
          <div className="section">
            <p>Section 1 (welcome to fullpage.js)</p>
            <button onClick={() => fullpageApi.moveSectionDown()}>Click me to move down</button>
          </div>
          <div className="section">
            <p>Section 2</p>
          </div>
        </ReactFullpage.Wrapper>
      );
    }}
  />
);

ReactDOM.render(<Fullpage />, document.getElementById('react-root'));

Notice that when using the option scrollOverflow:true or any fullPage.js extension you'll have to include the file for those features before the react-fullpage component.

State

The wrapper maintains state in accordance to the latest version of fullpage.js callbacks

The most recent callback event that triggered a state change will be available as state.lastEvent

NOTE: if the v2 prop is passed, state will be mapped to v2 callbacks

Props

You can use any options supported by fullPage.js library as react props.

Props object can contain standard options as well as fullPage.js callbacks.

More on callbacks here

NOTE: jquery must be passed as a prop ($) if using the v2 API

Methods

fullPage.js contains many methods. You can use any of them. These are made available as properties on the imported fullpage.js library once the first render has occured.

Callbacks

Each callback name passed to the component will maintain state itself and this will be reflected via the render prop Callback parameters and the latest callback fired by fullpage.js will be reflected in state.

Contributing

Found an issue? Have an idea? Check out the Contributing guide and open a PR

Resources