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.

Sign up for GitHub

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

Jump to bottom

The cursor does not disable active mode when I go to a new page in Next JS #6

Open
ivanjeremic opened this issue Feb 11, 2021 · 15 comments
Open

The cursor does not disable active mode when I go to a new page in Next JS #6

ivanjeremic opened this issue Feb 11, 2021 · 15 comments

Comments

@ivanjeremic
Copy link

The cursor does not disable active mode when I go to a new page in Next JS, It only works if I randomly click anywhere in the body on the new page then it works again, basically when I click a link and on the new page the cursor stays active the active does not go away until I click somewhere in the body.

Any solution to this? The library needs somehow to detect a page change a reset everything in the cursor until it goes over a link again.
@JordanSuarez
Copy link

Hello,

I'm not using Next JS, but i have the same issue, when i change page the Cursor does not disable active mode.

I found a solution, it's not the better of course, but it's work for me, it's just for a small project (my portfolio).

So the solution consist to import the Cursor component inside the router component (react router dom), so I can use the useHistory hook to detect if the current location has change.

Screenshot 2021-02-26 at 12 03 22

Then, inside the Cursor component, I added a useEffect which will update the Cursor state (isActive) at each change of route.

Screenshot 2021-02-26 at 12 03 58

i hope it will help

@stephenscaff
Copy link
Owner

Sorry, just caught this. @ivanjeremic I assume you're using Next's Link helper when updating routes?
And thanks for the insight @JordanSuarez. I'll see what we can come with built in, but some kind of way to update if isActive feels like a good move. Or, maybe just going inactive after clicks?

Will check it out today.

@ivanjeremic
Copy link
Author

ivanjeremic commented Mar 1, 2021 •
edited
Loading

Sorry, just caught this. @ivanjeremic I assume you're using Next's Link helper when updating routes?
And thanks for the insight @JordanSuarez. I'll see what we can come with built in, but some kind of way to update if isActive feels like a good move. Or, maybe just going inactive after clicks?

Will check it out today.

Yes, there needs to be something that sets the cursor inactive after clicks, I tried the solution @JordanSuarez suggested long before opening this issue and it would work in a normal CRA but in NextJS the method has no effect the cursor still stays active after clicking a link or button and navigating to a new page, any recommendations to quick fix this until there is something built-in? Thanks

@ivanjeremic
Copy link
Author

Anything new on this?

@baktiaditya
Copy link

baktiaditya commented Jun 24, 2021 •
edited
Loading

hope can give you some inspiration, I'm using this in my Next.js project (modified version of react-animated-cursor)
https://gist.github.com/baktiaditya/41d83e04972cca950b59bb7ac83e7930#file-cursor-tsx-L60-L81

usage in Next.js _app.tsx:

const router = useRouter();
const cursorRef = React.useRef<CursorRef>(null);

React.useEffect(() => {
  router.events.on('routeChangeComplete', progressDone);
  router.events.on('routeChangeError', progressDone);

  return () => {
    router.events.off('routeChangeComplete', progressDone);
    router.events.off('routeChangeError', progressDone);
  };
}, []);

const progressDone = () => {
  const { current: cursor } = cursorRef;
  if (cursor) {
    cursor.update();
  }
};

return (
  <Cursor ref={cursorRef} />
);

@ivanjeremic
Copy link
Author

ivanjeremic commented Jun 25, 2021 •
edited
Loading

@baktiaditya Thank you, do I still need to import it dynamically? It works perfectly for the built-in a tags but I have some dynamically generated elements that do not trigger the cursor animation even when added to the clickableTargets any idea? I use also a lot of 'id's in my targets can this be an issue?

It works only when I do some random changes in the editor and save and go directly over some element then the animation works, but as soon as I reload it stops working.

@ivanjeremic
Copy link
Author

ivanjeremic commented Jun 25, 2021 •
edited
Loading

@baktiaditya Hope you have some advice for me why some links only work after I save some work in the editor and instantly try on the Site but as soon as I refresh the browser it stops working until I add some random comment in my code and safe. hmm

This Cursor has the exact same issues, the only solution is to import the Cursor in every component/page

@stephenscaff
Copy link
Owner

stephenscaff commented Jun 25, 2021 via email

@baktiaditya
Copy link

baktiaditya commented Jun 28, 2021 •
edited
Loading

clickableTargets

@baktiaditya Thank you, do I still need to import it dynamically? It works perfectly for the built-in a tags but I have some dynamically generated elements that do not trigger the cursor animation even when added to the clickableTargets any idea? I use also a lot of 'id's in my targets can this be an issue?

It works only when I do some random changes in the editor and save and go directly over some element then the animation works, but as soon as I reload it stops working.

You can refactor my Cursor code and try to make the clickableTargets as a props. And for the dynamic elements, you can use react context to pass the cursorRef from the _app.tsx file, then call cursor.update in you related pages / components when your dynamic elements is rendered.

@milindgoel15
Copy link

Any updates? It seems to be causing it on app router for me but fine on pages router

@stephenscaff
Copy link
Owner

stephenscaff commented Jan 15, 2024 via email

@ivanjeremic
Copy link
Author

ivanjeremic commented Jan 15, 2024 via email

@stephenscaff
Copy link
Owner

stephenscaff commented Jan 15, 2024 via email

@ivanjeremic
Copy link
Author

I will dig it out from the codebase where I used my custom cursor and try to fix it here once I find time.

@adamgobes
Copy link

adamgobes commented Jan 25, 2024 •
edited
Loading

@ivanjeremic mind sharing how you solved the issue? I'm also running into it.

TLDR is the cursor stays active and enlarged when I click on a NextJS route and am navigated to a new page

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@baktiaditya @stephenscaff @adamgobes @ivanjeremic @milindgoel15 @JordanSuarez