react-konva now supports @reactjs v16. Now it uses new react-reconciler.

  • React Konva is a JavaScript library for drawing complex canvas graphics using React.
  • Currently you can use all components as React components and all events are supported on them in same way as normal browser events are supported.
  • It is NOT about drawing graphics, but react-konva is exactly for drawing complex graphics on element from React.
  • Konva helps here a lot (especially when you need events for objects on canvas, like “click” on shape, it is really hard to do with vanilla canvas).
  • Somethings like: – – But for simple cases you can use methods: – – For images you need manually create native window.Image instance or element and use it as attribute of component.

react-konva – React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.

GitHub is home to over 20 million developers working together to host and review code, manage projects, and build software together.

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.

events are supported on them in same way as normal browser events are supported.

You can even inspect the components in React dev tools.

import React from ‘react’; import ReactDOM from ‘react-dom’; import {Layer, Rect, Stage, Group} from ‘react-konva’; class MyRect extends React.Component { state = { color: ‘green’ }; handleClick = () => { // window.Konva is a global variable for Konva framework namespace this.setState({ color: window.Konva.Util.getRandomColor() }); } render() { return ( ); } } class App extends React.Component { render() { return ( < /Layer> < /Stage> ); } } ReactDOM.render(, document.getElementById(‘container’));

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.

you can read Konva Overview.

element from React.

react-art allows you to draw graphics on a page….

GitHub