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

[ivanjeremic]

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]

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

[stephenscaff]

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]

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]

Anything new on this?

[baktiaditya]

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]

@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]

@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]

Sorry. Been crushed lately but have some time to look at this after tomorrow.

Can you make a reduced test to look at? I haven’t had that issue.

On Fri, Jun 25, 2021 at 6:58 AM Ivan Jeremic @.***> wrote:

@baktiaditya https://github.com/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

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/stephenscaff/react-animated-cursor/issues/6#issuecomment-868519360, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABFUPFPA5WBKIT665W253CTTUSDQVANCNFSM4XOZQQPA .

[baktiaditya]

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]

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

[stephenscaff]

Yikes…. Been under water with work stuff and slacked on this.

But have a better understanding of RSC and next14 app dir now.

So, will take a closer look, probs tomorrow (have a very sick kiddo right now).

Can ping you once I push something up.

Thanks.

On Mon, Jan 15, 2024 at 9:27 AM Milind Goel @.***> wrote:

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

— Reply to this email directly, view it on GitHub https://github.com/stephenscaff/react-animated-cursor/issues/6#issuecomment-1892556172, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABFUPFLGMORLXDGVQOQIVY3YOVRIRAVCNFSM4XOZQQPKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOBZGI2TKNRRG4ZA . You are receiving this because you were mentioned.Message ID: @.***>

[ivanjeremic]

I solved this with a nice hack and fork, can publish my version to npm if so many people have this issue.

Gesendet von Outlook für iOShttps://aka.ms/o0ukef

---

Von: Stephen Scaff @.> Gesendet: Monday, January 15, 2024 6:32:32 PM An: stephenscaff/react-animated-cursor @.> Cc: Ivan Jeremic @.>; Mention @.> Betreff: Re: [stephenscaff/react-animated-cursor] The cursor does not disable active mode when I go to a new page in Next JS (#6)

Yikes…. Been under water with work stuff and slacked on this.

But have a better understanding of RSC and next14 app dir now.

So, will take a closer look, probs tomorrow (have a very sick kiddo right now).

Can ping you once I push something up.

Thanks.

On Mon, Jan 15, 2024 at 9:27 AM Milind Goel @.***> wrote:

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

— Reply to this email directly, view it on GitHub https://github.com/stephenscaff/react-animated-cursor/issues/6#issuecomment-1892556172, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABFUPFLGMORLXDGVQOQIVY3YOVRIRAVCNFSM4XOZQQPKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOBZGI2TKNRRG4ZA . You are receiving this because you were mentioned.Message ID: @.***>

— Reply to this email directly, view it on GitHubhttps://github.com/stephenscaff/react-animated-cursor/issues/6#issuecomment-1892561945, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ADKF4ADN5PTOUOVCEJGHZUDYOVR3BAVCNFSM4XOZQQPKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOBZGI2TMMJZGQ2Q. You are receiving this because you were mentioned.Message ID: @.***>

[stephenscaff]

Submit a PR if you’d like and I’ll merge it in.

On Mon, Jan 15, 2024 at 9:39 AM Ivan Jeremic @.***> wrote:

I solved this with a nice hack and fork, can publish my version to npm if so many people have this issue.

Gesendet von Outlook für iOShttps://aka.ms/o0ukef

---

Von: Stephen Scaff @.> Gesendet: Monday, January 15, 2024 6:32:32 PM An: stephenscaff/react-animated-cursor @.> Cc: Ivan Jeremic @.>; Mention @.> Betreff: Re: [stephenscaff/react-animated-cursor] The cursor does not disable active mode when I go to a new page in Next JS (#6)

Yikes…. Been under water with work stuff and slacked on this.

But have a better understanding of RSC and next14 app dir now.

So, will take a closer look, probs tomorrow (have a very sick kiddo right now).

Can ping you once I push something up.

Thanks.

On Mon, Jan 15, 2024 at 9:27 AM Milind Goel @.***> wrote:

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

— Reply to this email directly, view it on GitHub < https://github.com/stephenscaff/react-animated-cursor/issues/6#issuecomment-1892556172>,

or unsubscribe < https://github.com/notifications/unsubscribe-auth/ABFUPFLGMORLXDGVQOQIVY3YOVRIRAVCNFSM4XOZQQPKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOBZGI2TKNRRG4ZA>

. You are receiving this because you were mentioned.Message ID: @.***>

— Reply to this email directly, view it on GitHub< https://github.com/stephenscaff/react-animated-cursor/issues/6#issuecomment-1892561945>, or unsubscribe< https://github.com/notifications/unsubscribe-auth/ADKF4ADN5PTOUOVCEJGHZUDYOVR3BAVCNFSM4XOZQQPKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOBZGI2TMMJZGQ2Q>.

You are receiving this because you were mentioned.Message ID: @.***>

— Reply to this email directly, view it on GitHub https://github.com/stephenscaff/react-animated-cursor/issues/6#issuecomment-1892570041, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABFUPFPF5NVWCLXDOC4XEFLYOVSVTAVCNFSM4XOZQQPKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOBZGI2TOMBQGQYQ . You are receiving this because you were mentioned.Message ID: @.***>

[ivanjeremic]

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]

@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