react demo page

index.js

/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import ReactDOM from 'react-dom';

import fullpage from 'fullpage.js/dist/fullpage';
import ReactFullpage from 'react-fullpage.js/dist/react-fullpage.js';


const fullpageOptions = {
  licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
  fullpage,
  anchors: [
    'firstPage', 'secondPage', 'thirdPage',
  ],
  callbacks: ['onLeave'],
};

let fullpageApi; // NOTE: this will become available once the render prop fires

const FullpageWrapper = fullpageProps => (<ReactFullpage
  {...fullpageProps}
  render={({ state }) => {
    console.log('render prop change', state);

    if (!fullpageApi) {
      ({ fullpageApi } = state);
    }

    return (
      <div id="fullpage-wrapper">
        <div class="section fp-table active" id="section-1">
            <div class="fp-tableCell">
                <h2>fullpage</h2>
                <h1>The official vue-fullpage.js component for Vue.js</h1>
                <ul>
                    <li>
                        <a class="section-1-button" href="https://github.com/alvarotrigo/vue-fullpage.js" rel="noopener" data-t="">View on Github</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="section" id="section-2">
            <button class="my-arrow left" onClick="moveSlideLeft">
                <svg width="60px" height="80px" viewBox="0 0 50 80" xml:space="preserve">
                    <polyline fill="none" stroke="#FFFFFF" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" points="
                        45.63,75.8 0.375,38.087 45.63,0.375 "/>
                </svg>
            </button>
            <button class="my-arrow right" onClick="moveSlideRight">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60px" height="80px" viewBox="0 0 50 80" xml:space="preserve">
                    <polyline fill="none" stroke="#FFFFFF" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" points="
                        0.375,0.375 45.63,38.087 0.375,75.8 "/>
                </svg>
            </button>
            <div class="slide active" id="slide-2-1">
                <div class="shell">
                    <div class="shell-header">
                        <span class="shell-header-actions shell-header-close"></span>
                        <span class="shell-header-actions shell-header-minimize"></span>
                        <span class="shell-header-actions shell-header-maximize"></span>
                        <span class="shell-tabs">
                            <a href="#html" class="active shell-tab">HTML</a>
                            <a href="#js" class="shell-tab">JS</a>
                        </span>
                        <a href="https://codepen.io/alvarotrigo/pen/zpQmwq" class="shell-demo">See in Codepen</a>
                    </div>

                    <div class="shell-body">

                    </div>
                </div>
            </div>
            <div class="slide">
                <h3>Slide 2.2</h3>
            </div>
            <div class="slide">
                <h3>Slide 2.2</h3>
            </div>
            <div class="slide">
                <h3>Slide 2.2</h3>
            </div>
        </div>
        <div class="section" id="section2">
            <h3>Section 3</h3>
        </div>
      </div>
    );
  }}
/>);

ReactDOM.render(<FullpageWrapper {...fullpageOptions} />, document.getElementById('react-root'));