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;

Blog

react-konva useRef type error

SeongKuk Han

Error Solution Note

Error Message

Solution

Sample Code

Join Our Newsletter. No Spam, Only the good stuff.

Related