Change cursor on Hover in react-konva

Question

I'm using react-konva to create a UI for an application. I want it so that the cursor changes to a pointer when hovering over a Rect. There is documentation for how to do it with konva but not for react-konva. Can anyone help?

Answer 1

It works very similarly to Konva demos.

<Rect
  width={50}
  height={50}
  fill="red"
  onMouseEnter={e => {
    // style stage container:
    const container = e.target.getStage().container();
    container.style.cursor = "pointer";
  }}
  onMouseLeave={e => {
    const container = e.target.getStage().container();
    container.style.cursor = "default";
  }}
/>

Demo: https://codesandbox.io/s/react-konva-cursor-style-demo-96in7

Answer 2

Have you tried to use synthetic event onMouseOver and many other events.

Check this thread, How do you Hover in ReactJS? - onMouseLeave not registered during fast hover over

Answer 3

Also, you could merge two events:

const handleCursor = (e: KonvaEventObject<MouseEvent>) => {
   const stage = e.target.getStage();
   if (stage) {
     if (e.type === "mouseenter") {
       stage.container().style.cursor = "pointer";
     } else {
       stage.container().style.cursor = "default";
     }
   }
};