What is react-konva?
react-konva is a React wrapper for the Konva framework, which is a 2D canvas library for creating complex graphics on the web. It allows developers to use React components to draw shapes, images, and text on the canvas, making it easier to integrate with React applications.
What are react-konva's main functionalities?
Drawing Shapes
This feature allows you to draw basic shapes like rectangles and circles on the canvas. The code sample demonstrates how to create a red rectangle and a green circle using React components.
```jsx
import React from 'react';
import { Stage, Layer, Rect, Circle } from 'react-konva';
const DrawingShapes = () => (
<Stage width={window.innerWidth} height={window.innerHeight}>
<Layer>
<Rect x={20} y={20} width={100} height={100} fill='red' />
<Circle x={200} y={200} radius={50} fill='green' />
</Layer>
</Stage>
);
export default DrawingShapes;
```
Handling Events
This feature allows you to handle user interactions like clicks and drags. The code sample shows how to display an alert when a blue rectangle is clicked.
```jsx
import React from 'react';
import { Stage, Layer, Rect } from 'react-konva';
const HandlingEvents = () => {
const handleClick = () => {
alert('Rectangle clicked!');
};
return (
<Stage width={window.innerWidth} height={window.innerHeight}>
<Layer>
<Rect x={20} y={20} width={100} height={100} fill='blue' onClick={handleClick} />
</Layer>
</Stage>
);
};
export default HandlingEvents;
```
Animating Shapes
This feature allows you to animate shapes on the canvas. The code sample demonstrates how to animate a purple rectangle moving horizontally across the screen.
```jsx
import React, { useRef, useEffect } from 'react';
import { Stage, Layer, Rect } from 'react-konva';
const AnimatingShapes = () => {
const rectRef = useRef(null);
useEffect(() => {
const anim = new Konva.Animation((frame) => {
const rect = rectRef.current;
rect.x((rect.x() + frame.timeDiff * 0.1) % window.innerWidth);
}, rectRef.current.getLayer());
anim.start();
return () => anim.stop();
}, []);
return (
<Stage width={window.innerWidth} height={window.innerHeight}>
<Layer>
<Rect ref={rectRef} x={20} y={20} width={100} height={100} fill='purple' />
</Layer>
</Stage>
);
};
export default AnimatingShapes;
```
Other packages similar to react-konva
react-three-fiber
react-three-fiber is a React renderer for Three.js, a popular 3D graphics library. While react-konva focuses on 2D canvas graphics, react-three-fiber is used for creating 3D scenes and objects. It provides a similar React-based approach to managing graphics but in a 3D context.
react-canvas
react-canvas is another library for drawing graphics using React components, but it is more focused on performance and rendering large lists of items efficiently. It is less feature-rich in terms of drawing complex shapes and animations compared to react-konva.
react-svg
react-svg is a library for integrating SVG graphics into React applications. While it also deals with vector graphics, it uses SVG instead of the HTML5 canvas element. It is more suitable for static or less complex graphics compared to the dynamic and interactive capabilities of react-konva.
React Konva
React Konva is a JavaScript library for drawing complex canvas graphics using React.
It provides declarative and reactive bindings to the Konva Framework.
An attempt to make React work with the HTML5 canvas library. The goal is to have
similar declarative markup as normal React and to have similar data-flow model.
Currently you can use all Konva
components as React components and all Konva
events are supported on them in same way as normal browser events are supported.
You can even inspect the components in React dev tools.
Installation
npm instal react konva react-konva --save
Example
import React from 'react';
import ReactDOM from 'react-dom';
import {Layer, Rect, Stage, Group} from 'react-konva';
class MyRect extends React.Component {
render() {
return (
<Group>
<Rect
width="50"
height="50"
fill="green"
draggable="true"
onDragEnd={(e) => {
console.log('drag end');
}}
/>
</Group>
);
}
}
var App = React.createClass({
render: function() {
return (
<Stage width={700} height={700}>
<Layer>
<MyRect/>
</Layer>
</Stage>
);
}
});
ReactDOM.render(<App/>, document.getElementById('container'));
All react-konva
components correspond to Konva
components of the same
name. All the parameters available for Konva
objects are valid props for
corresponding react-konva
components, unless otherwise noted.
Core shapes are: Rect, Circle, Ellipse, Line, Image, Text, TextPath, Star, Label, SVG Path, RegularPolygon.
Also you can create custom shape.
To get more info about Konva
you can read Konva Overview.