Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="react-konva DEMO">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>react-konva DEMO</title>
  <script type="text/javascript" src="https://rawgit.com/konvajs/konva/master/konva.js"></script>
  <script type="text/javascript" src="https://rawgit.com/lavrton/react-konva/master/dist/react-konva.global.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
</head>
<body>
  <div id='container'></div>
</body>
</html>
 
const {Layer, Rect, Circle, Stage, Group} = ReactKonva;
​
class MyCircle extends React.Component {
    constructor(...args) {
      super(...args);
      this.state = {
         isMouseInside: false
      };
      this.handleMouseEnter = this.handleMouseEnter.bind(this);
      this.handleMouseLeave = this.handleMouseLeave.bind(this);
    }
    handleMouseEnter() {
      this.setState({
        isMouseInside: true
      });
    }
    handleMouseLeave() {
      this.setState({
        isMouseInside: false
      });
    }
    render() {
        return (
            <Circle
                x={100} y={60} radius={50}
                fill="yellow"
                stroke="black"
                strokeWidth={this.state.isMouseInside ? 5 : 1}
                onMouseEnter={this.handleMouseEnter}
                onMouseLeave={this.handleMouseLeave}
            />
        );
    }
}
​
class MyRect extends React.Component {
    constructor(...args) {
      super(...args);
      this.state = {
        color: 'green'
      };
      this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
      this.setState({
        color: Konva.Util.getRandomColor()
      });
    }
    render() {
        return (
            <Rect
                x={10} y={10} width={50} height={50}
                fill={this.state.color}
                shadowBlur={10}
                onClick={this.handleClick}
            />
        );
    }
}
​
function App() {
    return (
      <Stage width={700} height={700}>
        <Layer>
            <MyRect/>
            <MyCircle/>
        </Layer>
      </Stage>
    );
}
​
​
ReactDOM.render(<App/>, document.getElementById('container'));
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
lavrtonpro
0viewers