DEV Community

Awesome animated cursor with React Hooks⚡️

Andriy Chemerynskiy on June 01, 2020

Don't you find built-in cursors kinda boring?🥱 Me too. So I built my own. Let's start by adding basic styles and logic to our cursor. .curso...

Read full post

Richard Nguyen • Sep 6 '20

First of all, it's a great tutorial. But I have an issue working with internal navigation components, like @reach/router and Gatsby Link. When I hover on those links, the hovering animation is triggered. But I click on them, the hovered prop doesn't change; it remains the same throughout the app (it's supposed to change to normal). It works perfectly for original anchor elements <a></a>. Have any ideas to fix this? Thank you for your great post!

Andriy Chemerynskiy • Sep 7 '20

Hmm, I was unable to reproduce it for @reach/router

Here is the sandbox: codesandbox.io/s/reach-router-curs...

Can you provide more details? 🙂

Richard Nguyen • Sep 9 '20

I figured out the way how to fix it. So, when I use anchor elements for navigating, the app reloads so the states reloads too. But with internal links like @reach/router and gatsby-link, the app doesn't reload so the state doesn't reload as well. My solution is to use the useLocation hook from @reach/router and put it in the useEffect's deps, like:

const location = useLocation();

useEffect(() => {
    addEventListeners();
    handleLinkHoverEvents();
    return () => removeEventListeners();
  }, [location]);

It will update the state whenever the route is changed.

I still have no idea why your sandbox is still working. But thank you for your response. Keep up with great contents like this one!

Tomás Hurrell • May 21 '21

Hey! Awesome post!
I've been wanting to learn how to do this for quite some time!
I tried this while trying a component lib called geist-ui, and I'm having trouble hiding the pointer cursor for some buttons.
Here's my code, if someone has a workarround.
github.com/HurrellT/hurrellt.portf...
Thanks a lot!

Andriy Chemerynskiy • May 24 '21

Thank you! I checked your website and you have to override geist-ui link and buttons styles by adding cursor: none;
I didn't use geist-ui before but here is a guide on how you can do it: react.geist-ui.dev/en-us/guide/themes

dnirns • Oct 2 '20

Hiya, thanks for the great tutorial. I'm having an issue with the cursor and mouseenter/mouseleave not working properly in firefox (perfect in chrome however), was wondering if you have any insight into what might be going on?

Andriy Chemerynskiy • Oct 11 '20

Well, I have no idea why it happens :D

As a workaround, you can try adding mouseenter/mouseleave events to document.body instead of document to fix this issue

Try this:

 document.body.addEventListener("mouseenter", onMouseEnter);
 document.body.addEventListener("mouseleave", onMouseLeave);

Thank you for your comment!

Richard Butler • Aug 20 '20

This is some great stuff! I had an issue when scrolling, the cursor scrolled with the page so I used fixed instead of absolute for the cursor and clientX & clientY instead of pageX & pageY when setting the position and it seemed to sort this out. Cheers for the great content :)

Andriy Chemerynskiy • Aug 20 '20

Thank you!

That's a good point! Fixed it ;)

Fabián Ibarra • Aug 20 '20

Thank you! amazing content!

Andriy Chemerynskiy • Aug 20 '20

Thanks, looking forward to publishing more cool stuff ;)

Ivan Jeremic • Jan 4 '21

For me is the cursor unusable it lags the whole time, any idea why?

Andriy Chemerynskiy • Jan 4 '21

Can you share some code snippet, please?

Maybe it happens due to unwanted rendering loops that force heavy calculations, but I cannot say more without more details

Ivan Jeremic • Jan 4 '21

Yeah it feels like heavy calculations are happening but I can't find the bug, I also have the code not anymore but maybe I can find time to reproduce it.