Create Fullscreen Scrolling We

@ap.cx/react-fullpage

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

another demo:

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

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, hello@anotherplanet.io

Hit me up on Twitter

@Autre_planete