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

Create Fullscreen Scrolling Websites
https://github.com/thierryc/react-fullpage

fullpage react reactjs ui

Last synced: 5 days ago
JSON representation

Create Fullscreen Scrolling Websites

• Host: GitHub
• URL: https://github.com/thierryc/react-fullpage
• Owner: thierryc
• License: mit
• Created: 2018-07-07T18:48:08.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-06-10T07:23:42.000Z (over 1 year ago)
• Last Synced: 2024-12-15T21:04:08.229Z (11 days ago)
• Topics: fullpage, react, reactjs, ui
• Language: JavaScript
• Homepage: https://thierryc.github.io/react-fullpage/
• Size: 4.38 MB
• Stars: 206
• Watchers: 6
• Forks: 25
• Open Issues: 30
• Metadata Files:
  • Readme: README.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @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

[![NPM](https://img.shields.io/npm/v/@ap.cx/react-fullpage.svg)](https://www.npmjs.com/package/react-fullpage)

[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg)](https://github.com/thierryc/react-fullpage/blob/master/LICENSE)

## Install

```bash

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

```

## Usage

```jsx

import React, { Component } from 'react'

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

export default class App extends Component {

  render () {

    return (

      

        

          1

          2

          3

        

      

    )

  }

}

Migation from previous version.

Add the ```  ... ```

```

### For IE

```

npm i babel-polyfill

```

```

import "babel-polyfill";

```

## Mobile First

![Android Phone](https://raw.githubusercontent.com/thierryc/react-fullpage/master/static/images/android-phone.jpg)

## 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](https://www.browserstack.com/users/sign_up) for sponsoring this plugin. 👍

[![Browserstack](https://raw.githubusercontent.com/thierryc/react-fullpage/master/static/images/[email protected])](https://www.browserstack.com/users/sign_up)

## License (MIT)

```

WWWWWW||WWWWWW

 W W W||W W W

      ||

    ( OO )__________

     /  |           \

    /o o|    MIT     \

    \___/||_||__||_|| *

         || ||  || ||

        _||_|| _||_||

       (__|__|(__|__|

```

MIT © [thierryc](https://github.com/thierryc)

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

## Hit me up on Twitter

[@Autre_planete](https://twitter.com/Autre_planete?ref=github)