title: Konva infinite grid in React
body: <p>i,m trying to learn how to use canvas via a package react -konva. I fount the exact thing what i nead write in javascript but i nead to have it like react component and add images where rectangles are on button click. Can anyone help me to reorganize the code to display it in react.... This is the fiddle that i found on the web...<a href="https://jsfiddle.net/kiksy/jqo2h3dx/2/" rel="nofollow noreferrer">https://jsfiddle.net/kiksy/jqo2h3dx/2/</a></p>
  
  <pre><code>const stage = new Konva.Stage({
              container: 'container',
              width: window.innerWidth,
              height: window.innerHeight,
              draggable: true
          });
  
          const layer = new Konva.Layer();
          stage.add(layer);
  
  
          const WIDTH = 100;
          const HEIGHT = 100;
  
          const grid = [
              ['red', 'yellow'],
              ['green', 'blue']
          ];
  
          const blocks = [
              { w: 150, h: 150 , background: "white" , image: "/img/test2.png" , fullImage: false, title: "" , text: "" },
              { w: 150, h: 150 , background: "white" , image: "/img/person-icon.png" ,  fullImage: false ,title: "" , text: "" },
              { w: 150, h: 150 , background: "#575756" , image: "" ,  fullImage: false, title: "Title" , text: "" },
              { w: 300, h: 300 , background: "white" , image: "/img/test.png", fullImage: true, title: "" , text: "" }
  
          ];
  
              function checkShapes() {
              const startX = Math.floor((-stage.x() - stage.width()) / WIDTH) * WIDTH;
              const endX = Math.floor((-stage.x() + stage.width() * 2) / WIDTH) * WIDTH;
  
              const startY = Math.floor((-stage.y() - stage.height()) / HEIGHT) * HEIGHT;
              const endY = Math.floor((-stage.y() + stage.height() * 2) / HEIGHT) * HEIGHT;
  
  
  
              var i = 0;
              for(var x = startX; x &lt; endX; x += WIDTH) {
                  for(var y = startY; y &lt; endY; y += HEIGHT) {
  
                      if(i === 4)
                      {
                          i = 0;
                      }
  
                      const indexX = Math.abs(x / WIDTH) % grid.length;
                      const indexY = Math.abs(y / HEIGHT) % grid[0].length;
  
                      layer.add(new Konva.Rect({
                          x,
                          y,
                          width: WIDTH,
                          height: HEIGHT,
                          fill: grid[indexX][indexY],
                          stroke: 'black',
                          strokeWidth: 4
                      }))
  
                      if(blocks[i].title != ""){
  
                          var complexText = new Konva.Text({
                              x,
                              y,
                              text: "TEST TEXT",
                              fontSize: 14,
                              fontFamily: 'Calibri',
                              fill: 'white',
                              width: WIDTH,
                              height: HEIGHT,
                              verticalAlign: 'middle',
                              align : "center"
                          });
  
                          layer.add(complexText);
  
                      }
  
  
  
                  }
                  i++
              }
  
          }
  
          checkShapes();
          layer.draw();
  
          stage.on('dragend', () =&gt; {
              layer.destroyChildren();
              checkShapes();
              layer.draw();
          })
  </code></pre>