React Konva

React + Canvas = Love. JavaScript library for drawing complex canvas graphi...

ReactCanvas
konvajs/react-konvakonvajs.github.io/docs/react/react-konva

README

React Konva

Build Status Greenkeeper badge

ReactKonva Logo

React Konva is a JavaScript library for drawing complex canvas graphics using
React.

It provides declarative and reactive bindings to the
Konva Framework.

OPEN 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.

At the current moment, react-konva is not supported in React Native environment.

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.

Installation


  1. ``` sh
  2. npm install react-konva konva --save
  3. ```

Tutorials and Documentation


Example


  1. ``` js
  2. import React, { Component } from 'react';
  3. import { render } from 'react-dom';
  4. import { Stage, Layer, Rect, Text } from 'react-konva';
  5. import Konva from 'konva';

  7. class ColoredRect extends React.Component {
  8.   state = {
  9.     color: 'green',
  10.   };
  11.   handleClick = () => {
  12.     this.setState({
  13.       color: Konva.Util.getRandomColor(),
  14.     });
  15.   };
  16.   render() {
  17.     return (
  18.       <Rect
  19.         x={20}
  20.         y={20}
  21.         width={50}
  22.         height={50}
  23.         fill={this.state.color}
  24.         shadowBlur={5}
  25.         onClick={this.handleClick}
  26.       />
  27.     );
  28.   }
  29. }

  31. class App extends Component {
  32.   render() {
  33.     // Stage is a div container
  34.     // Layer is actual canvas element (so you may have several canvases in the stage)
  35.     // And then we have canvas shapes inside the Layer
  36.     return (
  37.       <Stage width={window.innerWidth} height={window.innerHeight}>
  38.         <Layer>
  39.           <Text text="Try click on rect" />
  40.           <ColoredRect />
  41.         </Layer>
  42.       </Stage>
  43.     );
  44.   }
  45. }

  47. render(<App />, document.getElementById('root'));
  48. ```

To get more info about Konva you can read
Konva Overview.

Actually you don't need to learn react-konva. Just learn Konva framework, you will understand how to use react-konva

Core API


react-konva supports all shapes, that Konva supports with the same names, and also it supports all the same events like click, touchmove, dragend, etc with "on" prefix like onClick, onTouchMove, onDragEnd.

Getting reference to Konva objects


To get reference of Konva instance of a node you can use ref property.

  1. ``` js
  2. class MyShape extends React.Component {
  3.   componentDidMount() {
  4.     // log Konva.Circle instance
  5.     console.log(this.circle);
  6.   }
  7.   render() {
  8.     return (
  9.       <Circle ref={(ref) => (this.circle = ref)} radius={50} fill="black" />
  10.     );
  11.   }
  12. }
  13. ```

Strict mode


By default react-konva works in "non-strict" mode. If you changed a property manually (or by user action like drag&drop) properties of the node will be not matched with properties from render(). react-konva updates ONLY properties changed in render().

In strict mode react-konva will update all properties of the nodes to the values that you provided in render() function, no matter changed they or not.

You should decide what mode is better in your actual use case.

To enable strict mode globally you can do this:

  1. ``` js
  2. import { useStrictMode } from 'react-konva';

  4. useStrictMode(true);
  5. ```

Or you can enable it only for some components:

  1. ``` js
  2. <Rect width={50} height={50} fill="black" _useStrictMode />
  3. ```

Take a look into this example:

  1. ``` js
  2. import { Circle } from 'react-konva';
  3. import Konva from 'konva';

  5. const Shape = () => {
  6.   const [color, setColor] = React.useState();

  8.   return (
  9.     <Circle
  10.       x={0}
  11.       y={0}
  12.       draggable
  13.       radius={50}
  14.       fill={color}
  15.       onDragEnd={() => {
  16.         setColor(Konva.Util.getRandomColor());
  17.       }}
  18.     />
  19.   );
  20. };
  21. ```

The circle is draggable and it changes its color on dragend event. In strict mode position of the node will be reset back to {x: 0, y: 0} (as we defined in render). But in non-strict mode the circle will keep its position, because x and y are not changed in render.

Minimal bundle


By default react-konva imports full Konva version. With all the shapes and all filters. To minimize bundle size you can use minimal core version of react-konva:

  1. ``` js
  2. // load minimal version of 'react-konva`
  3. import { Stage, Layer, Rect } from 'react-konva/lib/ReactKonvaCore';

  5. // minimal version has NO support for core shapes and filters
  6. // if you want import a shape into Konva namespace you can just do this:
  7. import 'konva/lib/shapes/Rect';
  8. ```

Demo: https://codesandbox.io/s/6l97wny44z

Usage with React Context


Note: this section may be not relevant, because this issue was fixed in react-konva@18.2.2. So context should work by default.

Due to a known issue with React, Contexts are not accessible by children of the react-konvaStage component. If you need to subscribe to a context from within the Stage, you need to "bridge" the context by creating a Provider as a child of the Stage. For more info, see this discussion and this react-redux demo. Here is an example of bridging the context (live demo):

  1. ``` js
  2. import React, { Component } from 'react';
  3. import Konva from 'konva';
  4. import { render } from 'react-dom';
  5. import { Stage, Layer, Rect } from 'react-konva';

  7. const ThemeContext = React.createContext('red');

  9. const ThemedRect = () => {
  10.   const value = React.useContext(ThemeContext);
  11.   return (
  12.     <Rect x={20} y={50} width={100} height={100} fill={value} shadowBlur={10} />
  13.   );
  14. };

  16. const Canvas = () => {
  17.   return (
  18.     <ThemeContext.Consumer>
  19.       {(value) => (
  20.         <Stage width={window.innerWidth} height={window.innerHeight}>
  21.           <ThemeContext.Provider value={value}>
  22.             <Layer>
  23.               <ThemedRect />
  24.             </Layer>
  25.           </ThemeContext.Provider>
  26.         </Stage>
  27.       )}
  28.     </ThemeContext.Consumer>
  29.   );
  30. };

  32. class App extends Component {
  33.   render() {
  34.     return (
  35.       <ThemeContext.Provider value="blue">
  36.         <Canvas />
  37.       </ThemeContext.Provider>
  38.     );
  39.   }
  40. }
  41. ```

Comparisons


react-konva vs react-canvas


react-canvas is a completely
different react plugin. It allows you to draw DOM-like objects (images, texts)
on canvas element in very performant way. It is NOT about drawing graphics, but
react-konva is exactly for drawing complex graphics on `` element from
React.

react-konva vs react-art


react-art allows you to draw graphics on
a page. It also supports SVG for output. But it has no support of events of
shapes.

react-konva vs vanilla canvas


Vanilla canvas is faster because when you use react-konva you have two layers of abstractions. Konva framework is on top of canvas and React is on top of Konva.
Depending on the use case this approach can be slow.
The purpose of react-konva is to reduce the complexity of the application and use well-known declarative way for drawing on canvas.

CHANGELOG


Note: you can find a lot of demos and examples of using Konva there:
http://konvajs.github.io/. Really, just go there and take a look what Konva can do for you. You will be able to do the same withreact-konva too.