How to use Konva Node with ReactJs

Question

I want to use konva.js node nesting in react app. I need help on how to use it. Thanks in advance.

This question is not good for StackOverflow because it is "Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. " So you better "Instead, describe the problem and what has been done so far to solve it." — Andriy Kuba, Jan 16 '19 at 10:23

score 2 · Answer 1 · answered Jan 16 '19 at 10:25

I can advise you to use react-konva library https://github.com/konvajs/react-konva

The examples with the draggable circles:

import React, { Component } from 'react';
import Konva from 'konva';
import { render } from 'react-dom';
import { Stage, Layer, Circle, Text } from 'react-konva';

class App extends Component {
  handleDragStart = e => {
    e.target.setAttrs({
      scaleX: 1.3,
      scaleY: 1.3
    });
  };
  handleDragEnd = e => {
    e.target.to({
      duration: 0.5,
      scaleX: 1,
      scaleY: 1
    });
  };
  render() {
    return (
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          <Text text="You can drag a circle" />
          {[...Array(10)].map(i => (
            <Circle 
              key={i}
              x={Math.random() * window.innerWidth}
              y={Math.random() * window.innerHeight}
              radius={20}
              fill="green"
              opacity={0.8}
              draggable
              onDragStart={this.handleDragStart}
              onDragEnd={this.handleDragEnd}
            />
          ))}
        </Layer>
      </Stage>
    );
  }
}

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

You need to add react, konva, react-dom and react-konva dependencies

How to use Konva Node with ReactJs

1 Answers1