thierryc / 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/

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

react-fullpage's Issues

Browser tests

Browser tests

BUG : scrolling Bug

when you click on the right side steps, when you scroll to up,
it start from the last page !!

for example, click on the step 3 of 5 on the right side and then scroll to up, it start from last page

Progressive loading

https://medium.com/google-design/google-photos-45b714dfbed1

Hi, how can i dessable the scrollbar?

Expected Behavior

Actual Behavior

Navigator and OS versions

How to add Header?

I've found the great example here:

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

How can I make the same header? I've tried to use react-router-dom but it doesn't work.

Thanks!

How to styling Navigation?

I'm trying to style the dot in navigation, but styling is not working
Nb: I cant put code here, the code disappears when I paste in post, so I put this img link url.
Thx for attention

https://images2.imgbox.com/13/b3/ef53nqwv_o.png

For some reason, hash tag links stop working when I use this package - if you guys could add that feature it would be amazing!

Documentation

And more examples.

scrollbar position & page position don't update when following page link

Expected Behavior

Scrollbar and page "document" positions track viewport position when a breadcrumb / page anchor is clicked.

Actual Behavior

Scrollbar position and page position with respect to scrolling stay the same when breadcrumb links are clicked. This prevents scroll from working correctly after button-based navigation.

Navigator and OS versions

Navigator: Chrome v75.0.3770.142
OS: Win 10 Pro v1809 build 17753.615

Expose GoToSlide method

I do not see it in the documentation.

In my use case I would want to move to the next slide after user clicks button. Is there a way to access GoToSlide method? I see it is being use in Navigation component.

IE 11.0 (Edge) Tests

Windows&os_version=10&browser=IE&browser_version=11.0

Cannot read properties of null (reading 'clientHeight')

Expected Behavior

Actual Behavior

ERROR

Cannot read properties of null (reading 'clientHeight')
TypeError: Cannot read properties of null (reading 'clientHeight')
at http://localhost:3001/static/js/vendors-node_modules_ap_cx_react-fullpage_dist_index_es_js-node_modules_lodash_find_js.chunk.js:313:62

@thierryc

Navigator and OS versions

How to pass goto function to button

Expected Behavior

Actual Behavior

Navigator and OS versions

React-Fullpage Project Logo

Any suggestion ?

right nav toggle is missing

Right side dotted navbar toggle is missing in my webapp. Installed using npm
@thierryc

long scroll required to be triggered

Expected Behavior

Scroll on mouse wheel

Actual Behavior

When scrolling using the moue wheel it is required to scroll many times until the page scroll is triggered

Navigator and OS versions

Any

How to disable scrolling with arrow keys?

Expected Behavior

Page will not scroll on keydown of arrow keys

Actual Behavior

Page scrolls on up and down keys

Infinite scroll

Is it possible to make it infinite, make it reset to first slide after the last slide?

the vertical scrollbar doesn't move if you manually go to a slide - is this intentional ?

As you can see I'm on the first slide yet the scroll bar is at the very bottom

Expected Behavior

Actual Behavior

Navigator and OS versions

fixed position also getting scrolled

Expected Behavior

If I give some element fixed position (i.e. position: fixed) inside ideally it should stay on the screen and It should not get scrolled while scrolling.

Actual Behavior

If I give any element position fixed like below:

Hello

2

If I scroll to to second section fixed element should be shown.

Navigator and OS versions

add Eslint

eslint-config-airbnb
eslint-plugin-jsx-a11y

scrolling over page 3 on a longer scroll with the magic mouse

it is still scrolling over page 3 on a longer scroll with the magic mouse 😢

Restore scroll for content bigger than 100% (100vh).

Restore scroll for content bigger than 100% (100vh).

update scroll on resize

update scroll on resize

Act as Scroll Snapping Wrapper/Polyfill

Use scroll snapping by default but fallback to your custom logic otherwise: https://css-tricks.com/practical-css-scroll-snapping/

Refactor the goto page scroll position.

Expected Behavior

Actual Behavior

Navigator and OS versions

CreateSelenium Webdriver tests with NodeJS on BrowserStack.

How to get the current slide?

How to get the current slide?
I want to find out if a slide is in focus, so I can start my css animation. If it starts when the page loads, the user won't see it.

Add en new demo

Add a new demo

The current demo repo : https://github.com/thierryc/react-fullpage-gh-pages

Design examples.