react-konva useRef type error

Error Solution Note

I didn't know how to define the type of the ref prop of the Image component. InstanceType, ClassAttributes and the other ways I found didn't work. When I used Image as a type, I could use the ref but the other type error occurred. I just decided to get the type of the ref from the component using ComponentProps and it worked. the ref Object is defined as React.LegacyRef though, it seems working well.

---

Error Message

'Image' refers to a value, but is being used as a type here. Did you mean 'typeof Image'?ts(2749)

---

Solution

const imageRef: ComponentProps<typeof Image>["ref"] = useRef(null);

---

Sample Code

import { ComponentProps, useEffect, useRef, useState } from "react";
import { Stage, Layer, Image } from "react-konva";
import MapTileset from "./assets/map/map-tileset.png";

const App = () => {
  const [image, setImage] = useState<HTMLImageElement>();
  const imageRef: ComponentProps<typeof Image>["ref"] = useRef(null);

  useEffect(() => {
    const mapImage = new window.Image();
    mapImage.src = MapTileset;

    mapImage.onload = () => {
      imageRef.current.crop({ x: 0, y: 0, width: 30, height: 30 });
      imageRef.current.width(30);
      imageRef.current.height(30);

      setImage(mapImage);
    };
  }, []);

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Image image={image} ref={imageRef} />
      </Layer>
    </Stage>
  );
};

export default App;