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;
Top comments (0)