zwug / react-full-page Goto Github PK

How do you feel about adding keyboard arrow support to navigate between slides? I have implemented it and can pull request it!

Hi! Google Chrome broke sliding via mousewheel
Look here https://www.chromestatus.com/features/6662647093133312

As most of the scrolling is controlled by the package there should be a way of pausing/stopping the functions that are attached to the different events and return control of the scroll to the browser.

When opening a dialog on the page scrolling still happens on the background.
This also probably disables the functionality of any scrollable content that one might want to have.

My solution for now is to expose a boolean prop to the component which stops onScroll before it gets preventDefaulted.

I have imported 'react-full-page' into my GatsbyJS build and everything runs fine local. When I run the build script which compiles all of my local data into static templates window object returns undefined from is-mobile.js

function isMobileDevice() {
  // return typeof window.orientation !== 'undefined' || navigator.userAgent.indexOf('IEMobile') !== -1;
}

Here is the full error log

error Building static HTML for pages failed

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

  10 | 
  11 | function isMobileDevice() {
> 12 |     return typeof window.orientation !== 'undefined' || navigator.userAgent.indexOf('IEMobile') !== -1;
     | ^
  13 | }
  14 | 
  15 | 


  WebpackError: window is not defined
  
  - is-mobile.js:12 isMobileDevice
    ~/react-full-page/lib/utils/is-mobile.js:12:1
  
  - FullPage.js:136 new FullPage
    ~/react-full-page/lib/components/FullPage.js:136:1
  
  - ReactCompositeComponent.js:295 ReactCompositeComponentWrapper._constructComponentWithoutOwner
    ~/react-dom/lib/ReactCompositeComponent.js:295:1
  
  - ReactCompositeComponent.js:282 ReactCompositeComponentWrapper._constructComponent
    ~/react-dom/lib/ReactCompositeComponent.js:282:1
  
  - ReactCompositeComponent.js:185 ReactCompositeComponentWrapper.mountComponent
    ~/react-dom/lib/ReactCompositeComponent.js:185:1
  
  - ReactReconciler.js:43 Object.mountComponent
    ~/react-dom/lib/ReactReconciler.js:43:1
  
  - ReactMultiChild.js:234 ReactDOMComponent.mountChildren
    ~/react-dom/lib/ReactMultiChild.js:234:1
  
  - ReactDOMComponent.js:657 ReactDOMComponent._createContentMarkup
    ~/react-dom/lib/ReactDOMComponent.js:657:1
  
  - ReactDOMComponent.js:524 ReactDOMComponent.mountComponent
    ~/react-dom/lib/ReactDOMComponent.js:524:1
  
  - ReactReconciler.js:43 Object.mountComponent
    ~/react-dom/lib/ReactReconciler.js:43:1

My template looks like this

import React from 'react'
import Link from 'gatsby-link'
import data from '../../data/index'
import { FullPage, Slide } from 'react-full-page';
import SlideshowControls from '../../components/SlideshowControls'

class LandingPage extends React.Component {

    render() {

        // Dynamically generate homepage grid images
        let projects = data.map( (project, idx) => (
            <article key={`project-${project.name}`} id={project.id} >
                <Link to={project.url} className="link primary"></Link>
                <img src={project.img} />
            </article>
        ));

        // Dynamically generate slideshow
        let sliderImages = data[1].slideshow.map( (img, idx) => {
            return(
                <Slide key={`image-${idx}`} style={{backgroundImage: `url(${img})`}} />
            )
        });

        const controlsProps = {
            style: {
                top: '50%',
                right: '20px',
                position: 'fixed',
                transform: 'translateY(-50%)'
            },
        }

        return (
            <div>
                <FullPage ref="slideShow" controls={SlideshowControls} controlsProps={controlsProps}>
                    {sliderImages}
                    <Slide>
                        <div id="main">
                            <section id="one" className="tiles landingPage">
                                {projects}
                            </section>
                        </div>
                    </Slide>
                </FullPage>
            </div>
        )
    }
}

export default LandingPage

Can I, somehow, add route path for each slide?

How to disable scrolling to next slide while using it on the mobile?

Hi, thanks for your great work! I'm just curious what license it has. I can't find about this info anywhere. thank you.

When it comes to mobile views, I've tried to adjust the screen height. The height is never changed from 100% to the desired height when I attempt it. In my case, I experimented with the innerHeight and outerHeight values of the Slide Component, but it didn't work.

I would appreciate it if you could add the feature or help.

Thank you!

Controls (last PR) are not available when using react-full-page from NPM.
Needs an update ?

Hi! I'm using typescript for development, so facing the issue "Type Definitions not found for react-full-page". please create a type definition for the package.

While using this package I realized that my footer is getting set on the second section(i.e: Second Scroll) of the page. Whereas it should be at the bottom of the page.
I have some code that shows my problem on CodeSandbox.
Also, a StackOverflow question of the same.
Please check this, is there any alternative or any possible solution for this??

Please take a look.

Thank you!!

i have a problem when i use with next.js.

• when i saw react-full-page source code, i understand that the code compare with children and Slide then pass the same element's length to _slideCount. and we can slide as _slideCount's size
     -

but, when i run my code with next.js, the next.js pass another value to the children in my code (Slide).

• this is children's shape
     -

• this is _Slider.default shape
     -

So, _slidesCount is 0 becauseof the difference of each component's shape.
And the slide does not work.

please help🙏

Hello Guys!

I'm having a problem using react-full-page in gatsby project. When the project is builded the follow message is presented:

During development react components are only run in the browser where window is defined. When building, Gatsby renders these components on the server where window is not defined. So, do we have some way overcome this error?

I think if we check if windows exists (typeof window !== 'undefined') in line 8 can fix it.

Hi,
I wanted to do a full page scroll in Gatsby and it doesn't work here's the default component and its scroll implementation:

import React from "react"
import { FullPage, Slide } from 'react-full-page';

function index() {
  return (
    <div>
      <FullPage scrollMode>
        <Slide>
          <h1>Inner slide content</h1>
        </Slide>
        <Slide>
          <h1>Another slide content</h1>
        </Slide>
      </FullPage>
    </div>
  )
}

export default index

When I try to scroll with the mouse, nothing works.

Hello -- great plugin ... we use it a lot! We are using react-full-page in vertically-scrolling one page at the top of a website but would like the rest of the site content to scroll normally once the last section of the fullpage is viewed. Is this possible?
the effect like this,you scroll the last section,the content is normally scroll.
https://www.espasso.com/storefront/test

Let's say I have 3 sections which are set as height:100% which is default set from the react-full-page. and 1 footer.

It scrolls down well till the last section However, when its scrolling down from the 3rd section to the footer which is set as height:auto by me since I don't want it to be 100%, It seems like It doesn't scroll down smoothly. but When I scroll up from the footer to the 3rd section, it scrolls up smoothly.

Is there any idea why its like this??

thank you.

This project seems really nice! I suggest that you choose a license for it to allow other people to use it in their projects, MIT e.g.

Cheers!

i don not konw why ,
I have tried many times
but still can not work

code =>

import { FullPage, Slide } from 'react-full-page';
const App = () => (
<FullPage controls>
      <Slide>
        <h1>Inner slide content</h1>
      </Slide>
      <Slide>
        <h1>Another slide content</h1>
      </Slide>
      <Slide>
        <h1>Anotdsadher slide content</h1>
      </Slide>
    </FullPage>
)；
 

"react-full-page": "^0.1.11",

I'm on macOS and on your demo site, http://zwug.github.io/react-full-page/, I find it hard to scroll to 3rd or 4th slide and I always end up overscrolling past the slide that I want. I'm not sure if it's due to the inertial scrolling from my OS, but is there a way to change the scroll sensitivity?

Hello.
In ie11 your library does not work. There are no errors, but when scrolling or during the transition, the page always seeks to the top

Hi. I need to get current slide number. I know that we have getCurrentSlideIndex but I don't know how use it. Could you show me that in example?

With a single scrolling of the touchpad in safari, two sections will slip at once
There is no such thing in this plugin https://alvarotrigo.com/fullPage/#

First of all, thank you for providing a great fullpage solution.
It's not an issue or bug, i have no experience with "React" and cindfully asking for help.
Can you please point me out, how I can adjust the scroll duration?

• "React-Full-Page" installed as "npm".
• "FullPageExampleRef" used as a template.

It's a stuiped request, but if by any chance you would have time to help me out with this, it would be really great.
Sorry for bad english, my native language is russian.
Thank you in advance for your attention.

Hey, thanks for a good tool

Can you please explain one thing: when I initialize app, component FullPage contain 2 children, then I fetch new data and in FullPage becomes 4 children, but variable _slidesCount doesn't change. Even if I pass slidesCount manually depending on the size of the children inside, _slidesCount doesn't change. How can I fix this? Thank you.

My slides are separate from FullPage> Slide
My slides look like an array with const contentPage: () => [JSX.Element, ...] = () => { return [(<div id="0" className="content">),(...)]}
The component itself looks like this
<FullPage beforeChange={(e) => this.setState({ step: e.to })} controls> {contentPage.map(() => <Slide />)} </FullPage>
When scrolling, I drill a number from beforeChange and switch to a page whose id matches the number taken from beforeChange.
My problem is that I cannot use the third party menu when I want to switch to another page
I switch but the step in the slide remains the same

I am waiting:
When I click on the button of my menu, which will scroll to the page with a specific id, in FullPage the step will also change to the number that I selected

I looked at your files and did not understand how I can transfer the scrollToSlide number to FullPage

Can you tell me how I can integrate own controller?

The problem I have right now is I am using a different component which scrolls to "anchors". However the problem with such configuration is that I can go to the anchor/page with my own controller but any mouse scroll references the page that react-full-page was before and not necessarily the page I am now. Is there a way to manually set the current page so my other controllers and this one have the same "currentPageState"?

Hi,

Is this normal that there's some lag when scrolling? It looks like the animation is limited to 15 fps.

Regards

Hi there.
I read your documentation but didn't understand how to use scrollToSlide.
Can you explain it to me and with an example?
I have to say that I'm building navigation without passing it to control prop, but I want to handle onClick for each controller to scroll on that section.

How can I add custom controls?

Errors thrown when I do

npm install react-full-page

Peer dependency doesn't accept higher versions of react. should be something like ...wants react@^0.14.0 || ^15.0.0-0

If I press and hold to slide to 2 after the scroll another scroll event will be triggered and scroll to slide 3.
Is this intended?

Trying to use the library in a CRA (Create React App)

Failed to compile.

./node_modules/react-full-page/lib/components/Slide.js
Module not found: Can't resolve 'core-js/modules/es6.array.iterator' in 'landing-1/node_modules/react-full-page/lib/components'

Version : 0.1.8