title: React FabricJS Grouping (JSX)
body: <p>NPM Package: <a href="https://www.npmjs.com/package/react-fabricjs" rel="nofollow noreferrer">https://www.npmjs.com/package/react-fabricjs</a> </p>
  
  <p>I'm using react-fabricjs and have a canvas with some icons showing. I'm now trying to get Grouping to work but I can't work out the syntax. Essentially I want to create this effect but using React JSX Code:</p>
  
  <p><a href="http://jsfiddle.net/anwjhs2o/1/" rel="nofollow noreferrer">http://jsfiddle.net/anwjhs2o/1/</a></p>
  
  <p>This is the code I have:</p>
  
  <pre><code>import React from 'react';
  import {Canvas, Circle, Image, Path, Text, Rect, Ellipse, Triangle, Group} from 'react-fabricjs';
  
  
  export default class CanvasFabric extends React.Component {
  
  
      render() {
          return (
              &lt;Canvas
                  ref="canvas"
                  width="556"
                  height="371"
              &gt;
                  &lt;Circle
                      ref="circle"
                      radius={20}
                      left={100}
                      top={50}
                      stroke="green"
                      fill="blue"
                      blur={100}
                      color="rgba(0,0,0,0.6)"
                  /&gt;
                  &lt;Image
                      src="https://cloudinary-a.akamaihd.net/bountysource/image/twitter_name/d_noaoqqwxegvmulwus0un.png,c_pad,w_200,h_200,b_white/fabricjs.png"
                      width={64}
                      height={48}
                      left={10}
                      top={50}
                  /&gt;
                  &lt;Rect
                      ref="rect1"
                      width={50}
                      height={50}
                      left={150}
                      top={150}
                      fill="orange"
                      shadow="rgba(0,0,0,0.3) 5px 5px 5px"
                  /&gt;
                  &lt;Rect
                      ref="rect2"
                      width={60}
                      height={60}
                      left={145}
                      top={145}
                      stroke="purple"
                      strokeWidth={2}
                      blur={20}
                  /&gt;
                  &lt;Ellipse
                      ref="ellipse"
                      width={20}
                      height={100}
                      offsetX={350}
                      offsetY={250}
                      stroke="orange"
                      strokeWidth={2}
                      fill="yellow"
                  /&gt;
                  &lt;Triangle
                      ref="tri"
                      width={20}
                      height={20}
                      left={350}
                      top={250}
                      stroke="orange"
                      strokeWidth={1}
                      fill="black"
                      opacity={0.3}
                  /&gt;
                  &lt;Text text="Edit me"
                      top={300}
                      left={10}
                      shadow="rgba(0,0,0,0.3) 5px 5px 5px"
                      stroke="#ff1318"
                      strokeWidth={1}
                      fontStyle="italic"
                      fontFamily="Hoefler Text"
                  /&gt;
              &lt;/Canvas&gt;
          )
      }
  
  
  
  }
  </code></pre>
  
  <p>How could I say group the 2 Rect's - so they can be rotated/scaled etc together?</p>
  
  <p>thankyou
  Adam</p>
  
  <p>** Extra Note: I'm no React Expert but I get the feeling the Fabric React Package is far from completed and this is why core functionality doesn't work. </p>