@fullpage/react-fullpage

    0.1.19 • Public • Published

    react-fullpage

    preview

    Official React wrapper for the fullpage.js library

    react-fullpage version

    Browsers support

    IE / EdgeIE / Edge FirefoxFirefox ChromeChrome SafariSafari iOS SafariiOS Safari SamsungSamsung OperaOpera
    IE11, Edge last 2 versions last 2 versions last 2 versions last 2 versions last 2 versions last 2 versions

    Table of Contents

    Installation

    npm install @fullpage/react-fullpage

    This will install the wrapper as well as fullpage.js

    License

    Non open source license

    If you want to use react-fullpage to develop non open sourced sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Which means, you won't have to change your whole application's source code to an open source license. 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.

    UMD

    A umd bundle is available for those without a build step

    import ReactFullpage from '@fullpage/react-fullpage-umd'; // will return static version on server and "live" version on client

    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.

    When using SSR or a framework such as next.js, the component adjusts itself dynamically according to the presence of window

    import ReactFullpage from '@fullpage/react-fullpage'; // will return static version on server and "live" version on client

    SSR Examples: You can find a Gatsby and a Next.js examples in the "examples" folder. But here you have others too: gatsby next.js

    Examples

    In-depth examples can be found here. You can start with the React Example.

    Quickstart Example:

    import React from 'react';
    import ReactDOM from 'react-dom';
    import ReactFullpage from '@fullpage/react-fullpage';
    
    const Fullpage = () => (
      <ReactFullpage
        //fullpage options
        licenseKey = {'YOUR_KEY_HERE'}
        scrollingSpeed = {1000} /* Options here */
    
        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 ReactFullpage from '@fullpage/react-fullpage';
    
    // NOTE: if using fullpage extensions/plugins put them here and pass it as props
    const pluginWrapper = () => {
      require('./statics/fullpage.scrollHorizontally.min');
    };
    
    const Fullpage = () => (
      <ReactFullpage
        pluginWrapper = {pluginWrapper}
    
        //fullpage options
        licenseKey = {'YOUR_KEY_HERE'}
        scrollingSpeed = {1000} /* Options here */
        scrollHorizontally = {true}  /* Because we are using the extension */
        scrollHorizontallyKey = {'YOUR KEY HERE'}
    
        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 any fullPage.js extension you'll pass the pluginWrapper function prop to include the file for those features before the react-fullpage component mounted.

    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.

    Example

    More on callbacks here

    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.

    Styles

    All fullpage.js styles are loaded from the component via a <style/> tag created with javascript. To override fullpage.js styles you must match specificity. Example here in the overrides.css file

    Contributing

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

    Resources

    Keywords

    none

    Install

    npm i @fullpage/react-fullpage

    DownloadsWeekly Downloads

    4,279

    Version

    0.1.19

    License

    GPL-3.0

    Unpacked Size

    43 MB

    Total Files

    7903

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar