Skip to content

Instantly share code, notes, and snippets.

@alvarotrigo
Created July 23, 2018 12:01
Show Gist options
  • Save alvarotrigo/52554e533a816cc1ffd7cdb51828e6ea to your computer and use it in GitHub Desktop.
Save alvarotrigo/52554e533a816cc1ffd7cdb51828e6ea to your computer and use it in GitHub Desktop.
react demo page
/* 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'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment