I have a very simple Konva-react app (I've taken it right out of the docs) and it doesn't work (doesn't display the image) displaying two warnings:
<Image /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.<Image> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
My Canvas component:import { Image } from 'react-konva';
import useImage from 'use-image';
const url = 'https://konvajs.github.io/assets/yoda.jpg';
export default function Canvas() {
const [image] = useImage(url);
return <Image image={image} />;
}
My app component:
import Canvas from './canvas';
function App() {
return (
<div className="App">
<h2>Conva App</h2>
<Canvas />
</div>
);
}
export default App;
How can I fix it?
You can't simply render Konva components anywhere. You need to create the <Stage> and a <Layer> component first, and only then add your component:
import { Stage, Layer } from "react-konva";
import Canvas from "./canvas";
function App() {
return (
<div className="App">
<h2>Conva App</h2>
<Stage width={window.innerWidth} height={window.innerHeight}>
<Layer>
<Canvas />
</Layer>
</Stage>
</div>
);
}
export default App;
You can check this sandbox for a working example.