Skip to content

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

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

Description

@ivanjeremic
ivanjeremic
opened on Feb 11, 2021

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.

Activity

  1. JordanSuarez commented on Feb 26, 2021

    @JordanSuarez
    JordanSuarez
    on Feb 26, 2021

    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

  2. stephenscaff commented on Feb 26, 2021

    @stephenscaff
    stephenscaff
    on Feb 26, 2021
    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.

  3. ivanjeremic commented on Mar 1, 2021

    @ivanjeremic
    ivanjeremic
    on Mar 1, 2021
    Author

    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

  4. ivanjeremic commented on May 5, 2021

    @ivanjeremic
    ivanjeremic
    on May 5, 2021
    Author

    Anything new on this?

  5. baktiaditya commented on Jun 24, 2021

    @baktiaditya
    baktiaditya
    on Jun 24, 2021

    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} />
);

  6. ivanjeremic commented on Jun 25, 2021

    @ivanjeremic
    ivanjeremic
    on Jun 25, 2021
    Author

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

  7. ivanjeremic commented on Jun 25, 2021

    @ivanjeremic
    ivanjeremic
    on Jun 25, 2021
    Author

    @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

  8. stephenscaff commented on Jun 25, 2021

    @stephenscaff
    stephenscaff
    on Jun 25, 2021 via email
    Owner

  9. baktiaditya commented on Jun 28, 2021

    @baktiaditya
    baktiaditya
    on Jun 28, 2021

    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.

  10. milindgoel15 commented on Jan 15, 2024

    @milindgoel15
    milindgoel15
    on Jan 15, 2024

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

  11. stephenscaff commented on Jan 15, 2024

    @stephenscaff
    stephenscaff
    on Jan 15, 2024 via email
    Owner

  12. ivanjeremic commented on Jan 15, 2024

    @ivanjeremic
    ivanjeremic
    on Jan 15, 2024 via email
    Author

  13. stephenscaff commented on Jan 15, 2024

    @stephenscaff
    stephenscaff
    on Jan 15, 2024 via email
    Owner

  14. ivanjeremic commented on Jan 16, 2024

    @ivanjeremic
    ivanjeremic
    on Jan 16, 2024
    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.

  15. adamgobes commented on Jan 25, 2024

    @adamgobes
    adamgobes
    on Jan 25, 2024

    @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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions