react-konva

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.

README

react-konva

Konva canvas library using React components based on react-kinetic.

An attempt to make React work with the Konva 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

If you use browserify or webpack

npm install react konva react-konva

Then just require it

require('react-konva');

If you use require.js or want to use it standalone, then standalone version is available in Releases.

If you want to build from source

git clone https://github.com/olimsaidov/react-konva.git
cd react-konva
npm run umd

build/react-konva.js will be a standalone dist, you can require react and react-konva from there. ReactKonva Note that in all cases you need to have react and konva available, so have them included in <script> tag (or available to RequireJS if you use AMD).

User guide

Minimal example:

/** @jsx React.DOM */

var React = require('react');
var ReactKonva = require('react-konva');

var TestingComponent = React.createClass({
  render: function () {
    return (
      <ReactKonva.Stage height={300} width={300}>
        <ReactKonva.Layer>
          <ReactKonva.Rect x={100} y={100} width={50} height={50} fill="black" />
        </ReactKonva.Layer>
      </ReactKonva.Stage>
    );
  }
});

React.renderComponent(
  <TestingComponent />,
  document.body
);

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.

Every react-konva component (or components that use react-konva components) must be wrappe in Stage. Stage is the only react-konva element that has actual DOM representation. Unlike Konva.Stage, Stage will ignore container passed to it, because it constructs container by itself.

Stage's only valid children are Layer components. Layers are currently only components that handle redrawing and currently they redraw on all changes of props or children.

Layers can have all the other react-konva components inside. The supported elements are: Container, Layer, Group, Label, Shape, Rect, Circle, Ellipse, Ring, Wedge, Arc, Image, Text, Line, Sprite, Path, TextPath, RegularPolygon, Star and Tag. See Konva API docs for valid props.

Currently there is no API to add react-konva components for custom Konva nodes, but I'm planning to add it in the future. See KonvaComponent.js and KonvaFactory.js.

Events

react-konva supports all Konva events. The names are done 'react-style', so onCamelCased. Full mapping:

var KonvaEvents = {
  onMouseOver: "mouseover",
  onMouseOut: "mouseout",
  onMouseEnter: "mouseenter",
  onMouseLeave: "mouseleave",
  onMouseMove: "mousemove",
  onMouseDown: "mousedown",
  onMouseUp: "mouseup",
  onClick: "click",
  onDblClick: "dblclick",
  onDragStar: "dragstart",
  onDragEnd: "dragend",
  onTouchStart: "touchstart",
  onTouchMove: "touchmove",
  onTouchEnd: "touchend",
  onTap: "tap",
  onDblTap: "dbltap",
  onDragMove: "dragmove"
};

Events work in similar way as they work in normal React. See demo/rectangles.js for examples.

Internally, events use the .react namespace for Konva events, so this namespace shouldn't be used if you manually bind events, e.g. in componentDidMount.

Some internals

To get raw Konva node object, use the getKonvaNode method which all react-konva components have.