DEV Community

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

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