Customise cursor pointer using a react component

Edit - Overflowing body (AKA third problem)

if you'll add this to your body tag it should solve it:

  margin: 0;
  height: 100%;
  overflow: hidden

edit - Regarding your second problem

to prevent scroll bars to appear, you can use overflow-y: hidden; (to disable on the x-axis just change the overflow-y to overflow-x, overflow: hidden; for both)

BUT if you would like to enable scrolling but just hide the scrollbar, use the following code:

/* hide scrollbar but allow scrolling */
body {
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
  overflow-y: scroll; 
}

body::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}

here is a gif of a working example on my browser: https://i.sstatic.net/q7gtO.jpg

It doesn't get cut off for me on the right side (see image below). It sounds like the second problem happens because your cursor gets re-rendered every time you move it, and that's a ton of work for your site!

you should remove the style attributes from the Cursor component and adjust the code inside your event listener for a mousemove event. it will look like this:

onMouseMove = {e => {
    const cursor = document.querySelector('.cursor')
    cursor.style.top = ׳${e.pageY}px׳
    cursor.style.left = ׳${e.pageX}px׳
}}

Flickering:

#01:

Simply introduce a transition style on the Cursor component, eg transition: "all 50ms". It makes the position change much more smoother and cancels the flickering.

#02:

However as Guy mentioned above, handling the cursor's position in a state means a lot of re-rendering for your component which makes you app slower in the end.

I'd recommend making a ref for the cursor and update it directly from an event listener. With that change you can even remove the useMouse hook:

const App = () => {
  const containerNodeRef = useRef(null);
  const cursorRef = useRef(null)

  const updateMouse = (e) => {
    // you can directly access the mouse's position in `e`
    // you don't even need the useMouse hook
    cursorRef.current.style.top = `${e.y - SIZE / 2}px`
    cursorRef.current.style.left = `${e.x - SIZE / 2}px`
  }

  useEffect(() => {
        window.addEventListener('mousemove', updateMouse)
        return () => {
            window.removeEventListener('mousemove', updateMouse)
        }
    })

  return (
    <div
      ref={containerNodeRef}
      style={{
        width: window.innerWidth,
        height: window.innerHeight,
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        cursor: 'none'
      }}
    >
      <Cursor ref={cursorRef} />
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

const Cursor = forwardRef(({ size = SIZE }, ref) => (
    <div
      ref={ref}
      style={{
        position: "absolute",
        width: size,
        height: size,
        backgroundColor: "black",
        color: "white",
        fontWeight: "bold",
        display: "flex",
        justifyContent: "center",
        alignItems: "center"
      }}>
      Hello
    </div>
  )
)

Cut off issue:

Since you're moving around an actual div as your cursor, when it reaches the border of your document, it stretches it to make the div fit -> this is why the document doesn't fit into your window anymore thus the scrollbars are rendered.

You can fix it via css:

body { overflow: hidden }

+1:

I'm not sure how your cursor has to look like in the end, but if it'd be an image, there is an other possible solution. Add this css rule to your container, which loads an image as a cursor and then the browser takes care about the rendering automatically:

<div
      ref={containerNodeRef}
      style={{
        // ...
        cursor: 'url("url"), auto'
      }}
    >

If you'd use this solution then the whole Cursor component and position calculation wouldn't be needed anymore. However the downside is, that it only works with images.

There are already 2 good answers, but I'll add this one too, because other answers are overcomplicating the solution

1. Flickering

it doesn't matter if you use ref or state, you should just extract your cursor to separate Component, that way your App component will not rerender

2. Scrollbars

as other anwers mentioned, using body { overflow: hidden; } will solve this problem, but partially. Your cursor is trying to go beyond page size, hence page is showing scrollbars, adding limitation for cursor position will solve this: cursor.y = Math.max(0, Math.min(currentPositionY, page.width)) (pseudo-code) now cursor.y will not exceed 0 or page.width