DEV Community

Discussion on: React: Custom Cursor (No Extra dependencies!)

View post
Collapse
 
chiubaca profile image
Alex Chiu •

Nice, I like this a lot! Did you notice some janky behaviour when using the delayed animation? re: transition-duration: 100ms;

Collapse
 
holdmypotion profile image
Rahul •

Thank you so much :)
I did. It does sometimes lag on the initial paint. I'll try to update the blog if I find a solution for that. Do you have something in mind?

Collapse
 
chiubaca profile image
Alex Chiu •

Yeah i was tinkering with the same effect but using refs instead:

 const cursorRef = React.useRef<HTMLDivElement>(null!);

const moveListener = React.useCallback((event) => {
    const { clientX, clientY, target } = event;

    if (target === 'target-id'){
      // some custom logic to change cursor icon in here
    } 

    const mouseX = clientX - cursorRef.current.clientWidth / 2;
    const mouseY = clientY - cursorRef.current.clientHeight / 2;

})

return <div  className='custom-cursor' ref={cursorRef} /></div>;
Enter fullscreen mode Exit fullscreen mode

I dont get the lag with this method, but i'm hitting a bug with css animations when doing this method 😕

Thread Thread
 
abhinavjha27 profile image
ABHINAV JHA •

is it in the hooks file