alvarotrigo / react-fullpage

Official React.js wrapper for fullPage.js https://alvarotrigo.com/react-fullpage/
GNU General Public License v3.0
1.28k stars 179 forks source link

Having an Issue with Active class, react-fullpage #388

Open Whatsta opened 1 year ago

Whatsta commented 1 year ago

I am trying to use the active class for two slides. I am using react with Vite in Dev mode. I am not getting the expected results.

According to the https://github.com/alvarotrigo/fullPage.js, If you want to define a different starting point rather than the first section or the first slide of a section, just add the class active to the section and slide you want to load first.

function App() {

  return (
  <ReactFullpage
    //fullpage options
    licenseKey = {''}
    scrollingSpeed = {1000} /* Options here */
    controlArrows={true}
    menu={true}

    render={({ state, fullpageApi }) => {
      return (
        <ReactFullpage.Wrapper>
          <div className='section'>
              <div className='slide'>
                    <h1>Slide 1</h1>
              </div>
              <div className='slide active'>
                    <h1>Slide 2, Want this to show first</h1>
              </div>
          </div>
        </ReactFullpage.Wrapper>
      );
    }}
  />
);
}
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Versions

"@types/react": "^18.0.27", "@types/react-dom": "^18.0.10", "@vitejs/plugin-react": "^3.1.0", "vite": "^4.1.0"

As I was writing this I figured out that React.StrictMode was preventing Active class to have it's expected results. Simply removing React.StrictMode fixed it.

alvarotrigo commented 1 year ago

Can you reproduce the issue on this codesandbox? https://codesandbox.io/s/m34yq5q0qx

As I was writing this I figured out that React.StrictMode was preventing Active class to have it's expected results. Simply removing React.StrictMode fixed it.

Do you want to create a Pull Request to clarify this?

Whatsta commented 1 year ago

Issue_ActiveClass.zip I couldn't recreate it in codesandox, but I've attached a zip file with the package.json and code. Should be able to reproduce that way.

alvarotrigo commented 1 year ago

Thanks!