Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Whatsta opened this issue Feb 10, 2023 · 3 comments
Open

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

Whatsta opened this issue Feb 10, 2023 · 3 comments

Comments

@Whatsta
Copy link

Whatsta commented Feb 10, 2023

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 alvarotrigo transferred this issue from alvarotrigo/fullPage.js Feb 10, 2023
@alvarotrigo
Copy link
Owner

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
Copy link
Author

Whatsta commented Feb 13, 2023

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
Copy link
Owner

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants