The cursor does not disable active mode when I go to a new page in Next JS
ivanjeremic opened this issue · comments
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.
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.
Then, inside the Cursor component, I added a useEffect which will update the Cursor state (isActive) at each change of route.
i hope it will help
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.
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
Anything new on this?
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} />
);@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.
@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
clickableTargets
@baktiaditya Thank you, do I still need to import it dynamically? It works perfectly for the built-in
atags but I have some dynamically generated elements that do not trigger the cursor animation even when added to theclickableTargetsany 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.
Any updates? It seems to be causing it on app router for me but fine on pages router
I will dig it out from the codebase where I used my custom cursor and try to fix it here once I find time.
@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