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.

DEMO

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.