aman-io / react-fullpage

Create Fullscreen Scrolling Websites

@ap.cx/react-fullpage

https://thierryc.github.io/react-fullpage/

another demo:

https://thierryc.github.io/react-fullpage-example/

• 0.1.10-alpha Alpha Version. Not for production.
• WARNING 0.1.7-alph and 0.1.8-alpha are 2 experimentals Alpha Version. Not for production.

This project is still in a very early stage. You shouldn't use this for production unless you really know what you're doing. 🖖

Features

• Design for Mobile, Tablet, and Desktop
• Nested Component (simple to use)
• Hide safari's header on Scroll on iphone and ipad
• Hide Google Chrome's header on Scroll on iOS and Android
• Drived by the scroll
• CSS animation
• GPU/CPU swtich
• Very Small ( ~ 25kB )
• MIT License (no fullpage.js dependency)

Create Fullscreen Scrolling Websites

Install

npm install --save @ap.cx/react-fullpage

Usage

import React, { Component } from 'react'
import Fullpage, { FullPageSections, FullpageSection } from '@ap.cx/react-fullpage'

export default class App extends Component {
  render () {
    return (
      <Fullpage>

        <FullPageSections>

          <FullpageSection style={{
            backgroundColor: 'lime',
            height: '80vh',
            padding: '1em',
          }}>1</FullpageSection>
          <FullpageSection style={{
            backgroundColor: 'coral',
            padding: '1em',
          }}>2</FullpageSection>
          <FullpageSection style={{
            backgroundColor: 'firebrick',
            padding: '1em',
          }}>3</FullpageSection>

        </FullPageSections>

      </Fullpage>
    )
  }
}

Migation from previous version.
Add the ``` <FullPageSections> ... </FullPageSections>```

For IE

npm i babel-polyfill

import "babel-polyfill";

Mobile First

Dev

open 2 terminal

In the first terminals windows.

> npm i
> npm link
> npm start

In the second terminal

> cd example
> npm i
> npm link @ap.cx/react-fullpage
> npm start

Thanks

Special thanks to BrowserStack for sponsoring this plugin. 👍

License (MIT)

WWWWWW||WWWWWW
 W W W||W W W
      ||
    ( OO )__________
     /  |           \
    /o o|    MIT     \
    \___/||_||__||_|| *
         || ||  || ||
        _||_|| _||_||
       (__|__|(__|__|

MIT © thierryc Copyright (c) 2018-present anotherplanet.io, [email protected]

Hit me up on Twitter

@Autre_planete