subtirelumihail / react-fullpage Goto Github PK

After launching the website for the first time the Navigation no link is being active.

Are there any hooks available to stop mouse scrolling conditionally?
I have a google map in one of the section and on cluster click, I am showing a list of items in a pop-up, which has to scroll in it. When scrolling in the pop-up, the section is also scrolling, setting overflow scroll doesn't work for me!

I tried this,

test(anchorLink, index) {
    console.log(anchorLink)
    console.log(index)
  }

let options = { 
       ...
      afterLoad: this.test()
}

I can't get the parameters.

Hi,

Does the Drag And Move Plugin extension work with the react version?

Are there breaking changes if to change react version in your lib to latest? Do you planning such update?

If entered url without hash or with hash for first section then active class doesn't add to first section anchor. This behavior already exists in example app.

This is an odd issue I'm having. Every time I scroll to the next (full screen) bullet point there is space added between my content within the full page. As I scroll to the next page the content keeps getting pushed down a little. I've commented out all of my CSS styling and it's still happening. By the time I get to the last full page screen, my content has been pushed to the middle of the page. if I add more pages it will eventually be split in half, half of my content on the top of the page and the other on the bottom.

I have tested this on chrome android and safari ios,
scrolling does not change slides.
react-fullpage: 0.1.16,
react version: 15.4.1

Hey,
How can I add tooltips to navigation dots? I tried adding this:
navigationTooltips: ['firstSlide', 'secondSlide'],
showActiveTooltip: false
in options but it's not working for me. Also if I put

This doesn't seem to be Ie9 compatible. Any chance of supporting Legacy browsers?

When I put className option for SectionsContainer and put its variable 'section-container', it works but When I use CSS Modules and put the className option as style['section-container'] it is ignored and the container div get the default className.

Also I imported styles:

import styles from './styles.css'

so It must work like react-slick. but it doesn't.

Hi,

When I load data via axios, I can not go back to the first section (unless I click on the prev button). Scrolling or keyboard up-button doesn't work.
But if I use static data, the problem doesn't occur. Is there something that I'm missing ?

My whole (simple) example

import React, { Component } from 'react';
import { ScrollToTopOnMount, SectionsContainer, Section } from 'react-fullpage';
import axios from 'axios';

class Example extends Component {
    constructor(props) {
      super(props)
      this.state = {
        current: 0,
        todos: []
      }
    }
    componentDidMount() {
        axios.get('http://jsonplaceholder.typicode.com/todos?_limit=5').then((response)=>{
            this.setState(()=>{
               return {
                 todos: response.data
               }
            })
        });
    }
    render() {
        const options = {
            sectionClassName: 'section',
            anchors: ['sectionOne', 'sectionTwo', 'sectionThree', 'sectionFour', 'sectionFive'],
            scrollBar: false,
            navigation: true,
            verticalAlign: false,
            sectionPaddingTop: '0px',
            sectionPaddingBottom: '0px',
            arrowNavigation: true,
            scrollCallback: (states) => this.setState({current: states.activeSection})
        };
        const {current} = this.state
        return (
            <div>
                 <ScrollToTopOnMount />
                <SectionsContainer className="container" {...options} activeSection={current}>
                    { this.state.todos.map((item)=>{
                            return <Section key={item.id}>{item.title}</Section>
                        })
                    }
                </SectionsContainer>
                <div className="btnGroup">
                    <button onClick={() => this.setState({current: current - 1})} disabled={current === 0}>pre</button>
                    <button onClick={() => this.setState({current: current + 1})} disabled={current === 2}>next</button>
                </div>
            </div>
        )
    }
}
export default Example;

if I change

                    { this.state.todos.map((item)=>{
                            return <Section key={item.id}>{item.title}</Section>
                        })
                    }

into static sections like this:

                    <Section>1</Section>
                    <Section>2</Section>
                    <Section>3</Section>
                    <Section>4</Section>
                    <Section>5</Section>

the problem doesn't occur.

Is this a (known) bug? How can I solve it ?

After navigation from fullpage to scrollable view by router there's still onResize event triggered.

My website is utilising a popup Lightbox image gallery, however once the lightbox is closed, the scrolling for fullpage seems to break, for example, having the scrollbar set to false, it seems to forcibly override and add it back.

For reference:

It looks like you have to set anchors in the options otherwise it will break. I'm hoping by removing the anchors from options we can get the following effect:

http://localhost/_sandbox/fullPage.js-master/examples/noAnchor.html

I want to use this in a project but I absolutely don't want hashtags to change in the url when you scroll up and down the page.

I have this error with 16 version of react

var ReactCurrentOwner = ReactInternals.ReactCurrentOwner;
^

TypeError: Cannot read property 'ReactCurrentOwner' of undefined

This is a common mistake for many plugins

It would be a good point to have a demo link in Github Pages, Zeit Now or Heroku. We could preview how the library works 👍

I can not assign my custom class to Header component.

Hi.
So navigating away from a component that uses this cool package and then resizing the displaying component causes this error. Is there a way to avoid this?

It doesn't seem to scroll on mobile devices, when I try touch-scroll.

I'm using pure CSS horizontal carousel in mobile view, Like google mobile version carousel, Just like below image:

But when I use react-fullpage, it doesn't work, also when I swipe horizontal then I see none in browser console, it means not up or down, and I believe react-fullpage prevent this action.

I think it is a BUG, if not how can I settle my issue?

Hey guys, is it possible to scroll on overflow, so if I drag my window smaller then the screen can scroll and then when it hits the end of the scroll then it goes to the next card? I think fullpage.js allows for this but there seems to be issues with this.

I think their option is scrollOverflow

Mount and unmount throw error

Hi
I want to add some animation when leaving a section. but onLeave callback method doesn't work. is there another way to implement this feature or not?
ideally i want to implement a behavior like this with full page react.
thanks in advance for your guidance.

Since React 15.5 PropTypes is no longer a part of the main package and has to be included as a different package: prop-types.
When accessing PropTypes from the main package we get:
TypeError: Cannot read property 'func' of undefined.

Migration guide

I would gladly submit a PR for this one if this repo is still active.

Hello,

I have a problem using whitespaces on inputs (including textareas, ...): they don't work at all and I don't understand why.

Didn't see someone having the same problem on the internet.

Thanks if someone can help me with that, love the package!

Hi, i have problem HashRouter. It auto refresh to http://localhost:3000/#/sectionTwo => 404 page
Any idea. Thanks

Does this support Horizontal Slider in Fullpage.js?

Because I don't have a lot of time to maintain this, I am looking for contributors.
Please reply with a comment and I will contact you so I can create a group a people that could maintain this plugin and maybe extend it even more

When setting arrowNavigation to true, you can no longer navigate in text input fields using arrow keys, and more importantly, you can not type spaces.

This is the offending code in SectionsContainer:
if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) { e.preventDefault(); // Prevent unwanted scrolling on Firefox }

Uncaught Invariant Violation: traverseParentPath(...): Cannot traverse from and to the same ID, ``.

Keep getting this error. Seems like it has something to do with the components that SectionsContainer or Section creates.

Maybe this can solve :
SectionsContainer.js:

constructor(props) {
            super(props);
            this.state = {
                activeSection: props.activeSection,
                scrollingStarted: false,
                sectionScrolledPosition: 0,
                windowHeight: window.innerHeight //modify 0 to window.innerHeight
            };

Hi,
I have a question where a section's height is about double the viewport's height. This messes up the entire slide experience.

Is there any way to set custom section height instead of the pre-calculated one?

Tell me, please, how to disconnect the plugin on mobile?
I use the option responsiveWidth, but it does not work..

Site with problem is here:
http://demo4.landmary.ru

If I set value 50 milliseconds to delay or set value 5000 milliseconds to delay it doesn't make sense to react-fullpage

Having some issues when rendering on server side, i believe at those lines
https://github.com/subtirelumihail/react-fullpage/blob/master/src/Section.js#L8
https://github.com/subtirelumihail/react-fullpage/blob/master/src/SectionsContainer.js#L13

Maybe it could be moved inside componentDidMount ?

Attempting to implement the React-Fullpage in a mobile view, when the content exceeds the screen size, a scroll will skip past all the content onto the next anchor. Is there any way to cater for this apart from introducing more anchors into the page?

When using react-fullpage on a mac laptop, using the touchpad, there is an issue that causes it to scroll too far and you end up scrolling two sections when you meant to scroll one.

There is a similar issue on fullpage.js here and it seems to be somewhat eliminated by using the css3 property. I'm not sure exactly what this does but it seems to fix the issue and they use it one all of their examples (which work well using mac touchpad)

There will be an error--'window is not defined' when I use server-side rendering.

It does not take effect when using mousewheel

Facing this error when trying to use react-fullpage in a GatsbyJS project.

SectionsContainer.js:432 Uncaught (in promise) TypeError: Cannot read property 'func' of undefined at Object../node_modules/react-fullpage/dist/SectionsContainer.js

Any ideas?

hi, I want to use the module in our web project.
but I don't find license of this module. Can owner define it?

https://github.com/subtirelumihail/react15-fullpage/tree/master/example

Example link doesn't work.

Hey guys, I'm using react-fullpage and when I scroll, but if I make my scroll gesture too long on the mac, I scroll through 2 sections at once. It will scroll to the next section, and then scroll to the next one.

Any fixes?

The readme only says things may change, but gives no indication of whether all the features, config, etc. have been brought over. Could you give some indication of what state it's in with respect to fullpage.js?

Component's code is the same as the example of your Git ,and also add the ScrollToTopOnMount component.But the browser gives the error "[react-router] Location "/sectionTwo" did not match any routes".

`import React, { Component, PropTypes } from 'react'
import {ScrollToTopOnMount, SectionsContainer, Section} from 'react-fullpage';

export default class Cover extends Component {
constructor(props) {
super(props)
this.state = {
current: 0,
}
}
render() {
const options = {
sectionClassName: 'section',
anchors: ['sectionOne', 'sectionTwo', 'sectionThree'],
scrollBar: false,
navigation: true,
verticalAlign: false,
sectionPaddingTop: '50px',
sectionPaddingBottom: '50px',
arrowNavigation: true,
scrollCallback: (states) => this.setState({current: states.activeSection})
};

const {current} = this.state

return (
  <div className="container">
    <ScrollToTopOnMount />
    <SectionsContainer className="container" {...options}>
      <Section className="custom-section" verticalAlign="true" color="#69D2E7" activeSection={current}>Page 1</Section>
      <Section color="#A7DBD8">Page 2</Section>
      <Section color="#E0E4CC">Page 3</Section>
    </SectionsContainer>
  </div>
)

}
}`

I have a simple landing page that uses react-router , and I'm having issues when navigating away from Fullpage.js.

My render method looks like this, and react-fullpage is only active in the Fullpage component:

render(
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Fullpage}/>
      <Route path="/terms" component={Terms}/>
      <Route path="*" component={Fullpage}/>
    </Route>
  </Router>,
  document.getElementById('root')
);

When I have scrollBar: false, the Terms component loads when I navigate to /terms but the page scroll is disabled. When I have scrollBar: true, I am able to scroll on the /terms route but it initially loads with the same scroll position that the Fullpage route had.

Is there any way to fix this? Either on my end or with a PR to the project? Has anyone else experienced something like this?