fullpage.js to be used with react components as sections ? (scrolloverflow/footer/anchors)

[leabaty]

Description

Hello there,

First of all, thank you for this nice tool. I've tried to fiddle a bit with it, reading the docs, but there are some things I can't seem to resolve, so any help would be welcome :)

I'm trying to use fullpage.js for my react app. I've implemented it in the App.js.

Here are my issues :

• I would like to be able to apply the scrolloverflow option on a component (nested in a "section").
• When using fp-auto-height on the footer, it's not showed at all (stops at the before last section, the last section being the footer). When I put it in between sections, i need to "scroll" 4-5 times before it shows (but it never shows when it's in last position).
• When using the anchors, the first 3 are working fine, and then the page stops at the third section, making us unable to scroll down.

So, the main question would be : Does fullpage.js allow the use of components as content for the sections in a react app ?

Thank you very much !

Code snippet

Structure of where fullpage.js is implemented (App.js) :

import { BrowserRouter as Router } from "react-router-dom";

import "../node_modules/fullpage.js/vendors/scrolloverflow.min.js";
import ReactFullpage from "@fullpage/react-fullpage";

import "./App.scss";

// COMPONENTS
import Navbar from "./components/Navbar/Navbar";
import Footer from "./components/Footer/Footer";

import Home from "./components/Home/Home";
import Work from "./components/Work/Work";
import About from "./components/About/About";
import Contact from "./components/Contact/Contact";

function App() {
  const anchors = ["Home", "Work", "About", "Contact Me"];

  return (
    <div className="app">
      <Router>
        <Navbar />

        <ReactFullpage

          // anchors={anchors}
          // navigation
          // navigationTooltips={anchors}

          licenseKey={process.env.REACT_APP_FULLPAGE_LK}
          scrollingSpeed={1000}
          scrollOverflow={true}

          render={({ state }) => {
            return (
              <ReactFullpage.Wrapper>
                <div className="section">
                  <Home />
                </div>

                <div className="section">
                  <Work />
                </div>

                <div className="section">
                  <About />
                </div>

                <div className="section">
                  <Contact />
                </div>

                <div className="section fp-auto-height">
                  <Footer />
                </div>

              </ReactFullpage.Wrapper>
            );
          }}
        />

      </Router>
    </div>
  );
}

export default App;

[alvarotrigo]

Can you please provide an isolated reproduction in jsfiddle or codepen, with no CSS or JS files external to fullPage.js and the minimum amount of HTML code? Use empty sections unless strictly necessary for reproduction.

[alvarotrigo]

Does fullpage.js allow the use of components as content for the sections in a react app?

For React questions please use react-fullpage issues instead.

[alvarotrigo]

I would like to be able to apply the scrolloverflow option on a component (nested in a "section").

ScrollOverflow applies to the section. Not quite sure what you mean by "a component nested in section."

What's the resulting HTML of your react app?

[leabaty]

Does fullpage.js allow the use of components as content for the sections in a react app?

For React questions please use react-fullpage issues instead.

Thank you for the quick replies, sorry for the wrong category. Should I move it before continuing this thread and let you delete this one ?

[alvarotrigo]

I moved it for you :)

[alvarotrigo]

You can try to reproduce the issue in Codesandbox with no CSS or JS files external to fullPage.js and the minimum amount of HTML code. Use empty sections unless strictly necessary for the reproduction.

[leabaty]

Oooookay - so, there seem to be an issue with my CSS files for the first two questions... and regarding the third one - it was an issue with the token that cannot take any backspace.

Consider everything solved : Fullpage.js works perfectly well with components, and inside App.js with react.
If anyone is searching for that, here is my codepen : https://codesandbox.io/s/white-night-i3z8eo

Have a great day ! 🌞

[alvarotrigo]

Glad to know you've found the answers :) Isolated reproductions tend to save me many times too!