reactjs / react-art

React Bridge to the ART Drawing Library

Note: This package is now part of the facebook/react monorepo.

React ART

React ART is a JavaScript library for drawing vector graphics using React.

It provides declarative and reactive bindings to the ART library.

Using the same declarative API you can render the output to either Canvas, SVG or VML (IE8).

The examples directory contains a simple example of using React ART; you can also test out the art branch of the react-page project.

Contribute

To read more about the community and guidelines for submitting pull requests, please read the Contributing document.

react-art's Issues

Text vertical position incorrect for canvas and fast rendering modes.

In this example both the Text and Rectangle have y set to 0.

Fast / Canvas

SVG (which is rendering correctly)

Anyone else experienced this? I know y'all core contributors are busy but if you point me in the right direction I can try my hand at fixing this.

Can't build vector-widget example

Steps:

1. git clone react-art repo
2. npm install
3. cd examples/vector-widget
4. npm install
5. npm run-script build

Error:

ERROR in ./~/react-art/src/ReactART.js
Module not found: Error: Cannot resolve module 'react/lib/ReactLegacyDescriptor' in ~/react-art/examples/vector-widget/node_modules/react-art/src
 @ ./~/react-art/src/ReactART.js 30:28-70

Docs and Demos

It would increase the visibility of react-art and art packages quite a lot if docs and demos were published in github pages and clickable right from this repo's description or readme.md.

Currently package.json in art mentions
http://sebmarkbage.github.io/art
https://github.com/sebmarkbage/art/issues
both of which give 404, and running the demos in
https://github.com/sebmarkbage/art/tree/master/demos
involved running git submodule update --init first, and the url parameters such as
/demos/opacity/index.html?svg
/demos/opacity/index.html?canvas
/demos/opacity/index.html?vml
had to be inferred from
https://github.com/sebmarkbage/art/blob/master/demos/mode.js

There are docs in https://github.com/sebmarkbage/art/tree/master/docs and an example using react-art in https://github.com/facebook/react-page/blob/art/src/elements/VectorWidget/VectorWidget.js

Is it possible to create a fixed width text-area?

Hi,

I'd like to place a text inside a rectangle, and I would love to see some auto-wrapping of the text inside this shape. If it is possible, could you please give some advice how I can achieve this?!

Thanks in advance!

clip-path

I use svg clip-paths all the time to do cool things, are there any plans to bring clip-path to react-art? Can't seem to find anything about it in the codebase.

Bump to 0.15.0 and publish to npm

A couple weeks ago you upgraded the dependencies for react 15.x, but didn't publish a new version to npm, which makes this module hard to install. Could you possibly bump the version number for this module to 0.15.0 and then publish a new version?

Should strokeWidth = 0 cause no stroke to render?

I expected setting strokeWidth={0} to cause no stroke to be rendered (even when stroke color is set).

However, the canvas draws it anyway because it doesn't accept a lineWidth of 0 (see here).

Here _stroke is only set when color is set. Could we add an extra condition so that it also checks for width > 0?

Allow configurable render mode

On a test project I'm working on, React state changes are causing flickering on the canvas. Assuming that the canvas was being completely redrawn on each change, I updated the render mode to "art/modes/dom" on line 21 of ReactART.js, and am seeing the flickering disappear.

In addition, with the VectorWidget example (no noticeable flickering at all, BTW), I'm seeing the consumed CPU time in Chrome OSX go down from around 20% to 15% after switching to DOM rendering.

I don't know all of the considerations involved, but adding the ability to choose the rendering mode would be useful.

Or would, perhaps, just using SVG directly make more sense for a project where DOM rendering makes more sense?

Tests fail when using [email protected]

Commit b27a7a0 updated the peerDependencies so [email protected] can be used, but as far as I can tell react-art won't work with it.

Updating the devDependencies to use [email protected] causes the tests to fail. Below is an error from the tests that I also get when trying to use react-art from my own app:

 Error: /home/thom/dev/react-art/src/ReactART.js: Cannot find module 'react/lib/emptyObject' from '/home/thom/dev/react-art/src'

I assume react/lib/emptyObject is no longer part of the react API?

Comments inside cildren of Group throws an error

This one threw me for a while: - but a null child produced from the following code causes an exception in react-art <Group>

   <Group key={id} y={0} x={0}>
   {
    /// comment in code
    }
    <Rectangle .... etc/>
   </Group>

Cannot read property 'getPooled' of null

Hi all,

I'm using webpack to create a react app along with react-art.

I keep getting the error Cannot read property 'getPooled' of null when I'm creating a simple surface such as

<Surface height={100} width={100}> <Shape d={'M36.7,8.1c-3.2,0-3.2-5,0-5C39.9,3.1,39.9,8.1,36.7,8.1L36.7,8.1z'} fill={'#123123'} /> </Surface>

Has anybody ran into this issue with webpack, or is this a possible problem with react-art? Thanks!

(I'm mostly only familiar with React ART within iOS, so maybe it's different for webpack? no idea)

Failed to build DependencyGraph: Naming collision detected: /node_modules/react-art/node_modules/fbjs/flow/include/TouchEventUtils.js

After adding the React Art .xcodeproj to my build phases, I get this issue every once in a while. I remove its fbjs package from node_modules and it fixes itself.

I'm wondering if there is another way that avoids this name collision.

Here's the exact issue I get:

Failed to build DependencyGraph: Naming collision detected: /Users/jamesgillmore/React/react-native-scrollable-tab-view/examples/FacebookTabsExample/node_modules/react-art/node_modules/fbjs/flow/include/TouchEventUtils.js collides with /Users/jamesgillmore/React/react-native-scrollable-tab-view/examples/FacebookTabsExample/node_modules/react-art/node_modules/fbjs/lib/TouchEventUtils.js
Error: Naming collision detected: /Users/jamesgillmore/React/react-native-scrollable-tab-view/examples/FacebookTabsExample/node_modules/react-art/node_modules/fbjs/flow/include/TouchEventUtils.js collides with /Users/jamesgillmore/React/react-native-scrollable-tab-view/examples/FacebookTabsExample/node_modules/react-art/node_modules/fbjs/lib/TouchEventUtils.js
    at HasteMap._updateHasteMap (HasteMap.js:132:13)
    at HasteMap.js:103:28
    at tryCallOne (/Users/jamesgillmore/React/react-native-scrollable-tab-view/examples/FacebookTabsExample/node_modules/promise/lib/core.js:37:12)
    at /Users/jamesgillmore/React/react-native-scrollable-tab-view/examples/FacebookTabsExample/node_modules/promise/lib/core.js:123:15
    at flush (/Users/jamesgillmore/React/react-native-scrollable-tab-view/examples/FacebookTabsExample/node_modules/asap/raw.js:50:29)
    at _combinedTickCallback (node.js:370:9)
    at process._tickCallback (node.js:401:11)

Sometimes its other files in fbjs/flow that collide.

Question on `moveChild` in ContainerMixin

The toIndex parameter is not used and you instead have special internal logic on where to position it that ignores the toIndex, why is that?

I see it is a duplicate of the createChild method.

NPM for react-art version mismatch with react 0.8.0

NPM for react-art is dependent on React 0.8.0, but this version does not contain:
DOMPropertyOperations.createMarkupForID function which is used in react-art. It means that current react-art npm does not work even for most simple things.

modern browser colors cause an error

Hi there!

I'm converting a react library from svg to react-art, and I got hung up on using colors like "tomato", which cause an error, and result in nothing being rendered. I tracked the problem down to the art library, and opened a PR there. sebmarkbage/art#12. I'd love a version bump whenever that lands.

Thanks!

render mode is unconfigurable

I have read the issue 17 and test source.
#17
https://github.com/reactjs/react-art/blob/master/src/__tests__/ReactART-test.js#L55-L59

And I think there is no way to change the render mode.
In ReactART.js, there is requiring the art/modes/fast, that decide the mode used in ReactART.
@sebmarkbage You said that is already configurable and already do this in the unit test.
Actually L56-L59 in ReactART-test.js do nothing about ReactART Object.

I think you can just delete the L14 in ReactART.js, and let us choose the mode freely.

Performance of rendering animations using React.

I don't know if it's just me, but it seems like doing this is a bit harsh for performance. There's a lot going on behind the scenes right (like React doing some diffing algorithms every frame each time render is called based on the state changing every 20 ms)?

It seems to me (correct me if I'm wrong) that React is better suited for rendering tree-like data structures (for example, rendering the structure of a DOM tree or the structure of a Three.js scene graph) but not for animating things in that structure at 60fps (less than 60fps in the case of a 20ms tick that isn't using requestAnimationFrame).

It seems to me that animating things like rotation (things that don't modify the nested structure rendered with React) should better be left to some other mechanism outside of React, a method that doesn't incur the performance cost of React's inner workings every frame. For example, I think a better approach would be to use React to change a state variable that specifies the "state" of an animation and for a separate handler to handle how that animation happens, using the vanilla API of the ART library. It'd be similar to using CSS classes to specify different states of animation for DOM elements, with CSS transitions between those states.

Binding event handlers to Surface

It doesn't seem to be possible to bind event handlers to the root Surface object. Given the following, the mouseDown handler never gets called:

<Surface onMouseDown={@mouseDown}>...</Surface>

strokeDash not working in svg mode

In modes/svg/base.js, I believe the change would be something like:

stroke: function(color, width, cap, join, dash){
        var element = this.element;
        element.setAttribute('stroke-width', (width != null) ? width : 1);
        element.setAttribute('stroke-linecap', (cap != null) ? cap : 'round');
        element.setAttribute('stroke-linejoin', (join != null) ? join : 'round');
        if (dash) {
            element.setAttribute('stroke-dasharray', dash.join(','));
        }
        this._setColor('stroke', color);
        return this;
    }

How to keep the line same width?

The top line is thinner than others. ("react-art": "^0.14.0")

import React from 'react';
import { Surface, Group, Shape, Path } from 'react-art';

function Line() {
  const d = Path();
  d.moveTo(10, 10).lineTo(10, 0).lineTo(300, 0).lineTo(300, 10);
  return <Shape stroke="#000000" strokeWidth={1} d={d} />;
}

export default function App() {
  return <Surface width={500} height={300}>
    <Line />
    <Group x={10} y={5}>
      <Line />
    </Group>
  </Surface>;
}

Ship react-art 0.11

@zpao

install for example broken.

[vector-widget]  [master]    npm install
npm WARN package.json @ No repository field.
npm WARN deprecated [email protected]: Package not maintained. Recent browserify uses https://github.com/feross/buffer
-
> @ postinstall /Users/myusuf3/Github/react-art/examples/vector-widget
> npm install ../..

npm WARN package.json @ No repository field.

> [email protected] prepublish /Users/myusuf3/Github/react-art
> gulp

sh: gulp: command not found

npm ERR! addLocalDirectory Could not pack /Users/myusuf3/Github/react-art to /Users/myusuf3/.npm/react-art/0.13.0/package.tgz
npm ERR! addLocal Could not install /Users/myusuf3/Github/react-art
npm ERR! Darwin 14.4.0
npm ERR! argv "node" "/usr/local/bin/npm" "install" "../.."
npm ERR! node v0.12.1
npm ERR! npm  v2.7.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] prepublish: `gulp`
npm ERR! Exit status 127
npm ERR!
npm ERR! Failed at the [email protected] prepublish script 'gulp'.
npm ERR! This is most likely a problem with the react-art package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     gulp
npm ERR! You can get their info via:
npm ERR!     npm owner ls react-art
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/myusuf3/Github/react-art/examples/vector-widget/npm-debug.log

npm ERR! Darwin 14.4.0
npm ERR! argv "node" "/usr/local/bin/npm" "install"
npm ERR! node v0.12.1
npm ERR! npm  v2.7.3
npm ERR! code ELIFECYCLE
npm ERR! @ postinstall: `npm install ../..`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ postinstall script 'npm install ../..'.
npm ERR! This is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm install ../..
npm ERR! You can get their info via:
npm ERR!     npm owner ls
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/myusuf3/Github/react-art/examples/vector-widget/npm-debug.log

Propagating events through tree

Another question to do with a similar project to this. I would like to hook into React's event system to dispatch events (to begin with keydown) through the tree, bubbling from my target which in this case is not a DOM node but a custom React component that is backed by a scene graph node in a WebGL library, constructed similarly to the ReactART components. Because of this the target of the native browser event is of course not the actual target React component I would like to propogate from.
To dispatch I see I can do something like this:
ReactEventListener.dispatchEvent(EventConstants.topLevelTypes.topKeyDown, browserEvent);
But that leads to the ReactMount module attempting to iterate through the ancestors using a mapping to DOM nodes. Is there a suggested way to change this behavior so it can receive my desired target ReactComponent and walk up the tree from that instead, to execute the event handling?

50x performance hit vs <canvas>

Perhaps I'm doing something trivially wrong, but with the below code which draws 2000 random rectangles on the canvas, react-art runs at about 5fps on my machine. The comparable code that uses the canvas API directly runs at a smooth 60fps. In fact, it takes until about 100,000 rects to bring the implementation down to 5fps.

Most (~70%) of the time seems to be spent in the ReactMultiChild.Mixin._updateChildren method:

Most of the self-time that isn't GC is in ReactElement:

Here's the code:

Test = React.createClass
  render: ->
    React.createElement 'div',
      onMouseMove: => @forceUpdate()
      onMouseDown: => @ivl = setInterval (=> @forceUpdate()), 16
      onMouseUp: => clearInterval @ivl
      React.createElement Surface,
        width: 800, height: 800
        React.createElement Group,
          y: 10, x: 10
          for [1..2000]
            React.createElement Rectangle, x: Math.random() * 800, y: Math.random() * 800, width: Math.random() * 40, height: Math.random() * 40, fill: 'red'



TestCanvas = React.createClass
  render: ->
    React.createElement 'canvas',
      width: 800 * devicePixelRatio, height: 800 * devicePixelRatio
      style: {
        width: 800
        height: 800
      }
      onMouseMove: => @paint()
      onMouseDown: => @ivl = setInterval @paint, 16
      onMouseUp: => clearInterval @ivl
  componentDidMount: ->
    @paint()

  paint: ->
    ctx = @getDOMNode().getContext '2d'
    ctx.save()
    ctx.scale(devicePixelRatio, devicePixelRatio)
    ctx.clearRect(0, 0, 800, 800)
    ctx.fillStyle = 'red'
    for [1..2000]
      ctx.fillRect Math.random() * 800, Math.random() * 800, Math.random() * 40, Math.random() * 40
    ctx.restore()

Server side rendering not working

I cant get react-art to render on the server because it relies on:

require('art/modes/fast'); // Flip this to DOM mode for debugging

line 14 ReactART.js

is it possible to load library in a server mode? or some mode option?

Align API with SVG where possible

Hi,
I'm converting a somewhat complex SVG component to work with ReactART. It's a huge thrill to see it rendering to canvas without rewriting the codebase, but the experience of learning the API has been a pretty painful groking of source. That's part lack of documentation but also that the prop names are sometimes consistent with SVG and other times not.

React has, except in cases of naming confict, maintained attribute similarity with HTML with an easy-enough camelCase translation. I think it would be a good approach for ReactART too. It would reduce cognitive load for developers by using an already familiar API, and it would make code reuse from SVG to ReactART all the easier.

I recognise that it could only ever be a subset of the ginormous SVG API, but a clearly defined subset could still be a lot easier to get up to speed with. At present, the API sometimes aligns with SVG, other times not, with no clear pattern for mental translation.

Examples that spring to mind...

• opacity = opacity (same, i.e. not blend as in ART)
• stroke-dasharray(string) = strokeDash(array)
• stroke-linecap(string) = strokeCap(string)
• text-anchor(start/middle/end) = alignment(left/center/right)
• d for path property, mimicking SVG
• <rect> = <Rectangle>

What do you think?

Event Handler Properties Change on Shape Ignored?

I hit a problem where subsequent render iterations on a Shape with a key in a collection didn't modify the property. The original bound mousedown event handler was still being used by the ART Shape. Checking the code, does Shape process componentWillReceiveProps ? I can see the call to applyNodeProps but it's not clear if new event handlers are re-applied.

how to get paths from illustrator working

The paths generated in illustrator look close enough to what's used in the examples. Illustrator seems to generate SVG paths with hyphens though:

M382.79,279.74l-29,18a1.48,1.48,0,0,1-2.27-.95V282.1l8.7,6h0a1.12,1.12,0,0,0,.75.29,1.14,1.14,0,0,0,1.14-1.14,1.12,1.12,0,0,0-.05-0.33h0a1.11,1.11,0,0,0-.12-0.27L358,277.78l11.74-9.61,13,8.08a2,2,0,0,1,0,3.49h0Z

Here's what is working from the examples:

var RED_DOT_PATH = "M12.5,17 C16.0898511,17 19,14.0898511 19,10.5 C19,6.91014895 16.0898511,4 12.5,4 C8.91014895,4 6,6.91014895 6,10.5 C6,14.0898511 8.91014895,17 12.5,17 Z M12.5,17";

How do I generate (or convert) to something like that using Illustrator and exporting SVGs?

Rectangle bugged ?

I've got the following error : Uncaught TypeError: Cannot read property 'toUpperCase' of undefined while creating a simple Rectangle :

  render: function() {
    return (
      <Surface
        width={700}
        height={700}>
        <Rectangle
          width={50}
          height={50}
          stroke="green"
          fill="blue"/>
      </Surface>
    );
  },

Stroke gradients?

According to this, gradients on strokes as well as fills are supported in SVG.

Is 'advanced stroke colors' a reference to gradients? Is there a reason they aren't supported?

I'm pretty noob at SVG, but I'm using strokes to draw lines (strokeJoin is nice), and it would be really useful to be able to add gradients, rather than switching to using fill.

If this is something that could feasibly be done I'm happy to put some effort into it, but it would be easier with some help from someone who knows what they're doing 😄

(While I'm here, how come issues aren't enabled on art?)

Support CDN'd / externally bundled React

react-art is reaching into the lib folder of react and using internal functionality which is not exposed when React is bundled on its own (eg the cdnjs version).

See here:

var ReactInstanceMap = require('react/lib/ReactInstanceMap');
var ReactMultiChild = require('react/lib/ReactMultiChild');
var ReactUpdates = require('react/lib/ReactUpdates');

var assign = require('react/lib/Object.assign');

I would expect to be able to use a tool such as browserify-shim to indicate in my app that a global instance of React exists (eg; the cdn'd version on window.React). However, due to the references to react/lib/X, which are not exposed, it causes things to break.

When using browserify-shim with the following in my package.json:

  "browserify-shim": {
    "react": "global:React",
    "react-dom": "global:ReactDOM",
    "react-art": {
      "depends": [
        "react"
      ]
    }
  },

I get the error:

Error: Cannot find module 'react/lib/ReactInstanceMap' from '/Users/jtelford/dev/test/node_modules/react-art/lib'

---

How can we stop react-art from reaching into react/lib/X?

traverseParentPath errors

"react": "^0.14.0",
"react-art": "^0.14.0",
"react-dom": "^0.14.0",

Conditional elements in nested elements will throw traverseParentPath errors.
Do i need to downgrade react, or is react-art not intended to work with nested structures?

More detailed documentation?

hello!

Thanks for this awesome library! As I was playing around with the demo page, I had to search through the source code to find which props to set in order to get certain functionality to work (for example, scaleX and scaleY for the Group component).

Is adding more documentation for the API already on the project roadmap or would you accept a PR for this? Thanks!

Question: How to use a compiled version of react-art?

I am using a compiled react.js alongside om and wonder if it is possible to use react-art together with my setting? Afaik there is only an example which uses server-side rendering (react-page), which is not what I am looking for.

Any help and practical steps on how to accomplish this is greatly appreciated!

Thanks in advance!

Gradient stroke

Is it possible to apply a LinearGradient to a stroke on a Shape?

Could not find `react/lib/Object.assign` on react v15.0.1

FAIL  __tests__/ReactART-test.js
● Runtime Error
Error: Cannot find module 'react/lib/Object.assign' from '/Users/raohai/works/react-art/src/ReactART.js'

https://github.com/reactjs/react-art/blob/master/src/ReactART.js#L27

needs npm publish

0.9.0 isn't available on npm and the current npm latest (0.7.9) isn't compatible with react 0.9.x

/cc @sebmarkbage

Importing Circle doesn't work

Whenever I add Circle to my Electron project like import Circle from 'react-art/shapes/Circle', I get the following error: "Uncaught TypeError: Cannot read property 'hex' of undefined", source: webpack:///./~/react-art/~/art/core/color.js? (223)

I wonder if this is specific to Electron. I haven't tried it in a regular browser yet.

Set up unit test environment for this repo

Needs to be able to require React internals (react/lib/...) and ART. This repo is npm compatible.

Travis CI would be super great.

Remove dependency on react-dom

With 0.14 React release the core React library is split from the DOM renderer in order to encourage projects like this to create their own rendering system. Are there plans to make a new renderer or will react-art continue to use react-dom? Will there be tutorials on the React site in the future on how authors can create their own renderer (what integration methods are required etc)?

Event handlers complain when attaching component method

I have added an onClick handler to the group component but I am getting this warning in my console:

bind(): React component methods may only be bound to the component instance. See Component

Here is a shortened version of my component which exhibits the warning. (Plain JS, no JSX)

var Component = React.createClass({
  displayName: 'Component',
  handleClick: function (event) {
    console.log('Clicked!');
  },
  render: function () {
    return (
      Surface({ width: 320, height: 480 },
        Group({ onClick: this.handleClick })
      )
    );
  }
});

I believe it has to do with the fact that Group is a React component and that it should only be binding its own methods to the event listener. Is there a way to put this together without getting this warning?

Interactive Shapes

Is there a plan to add interactivity to shapes, more specifically, allowing users to move and transform shapes similar to what fabric.js does? If so, how would this be ideally implemented?

I'd be interested in contributing the functionality. Right now I am playing around with adding it through an InteractionMixin mixed in with RenderableMixin and enabling with a interactive property.

Support for Ellipse component

I'm currently porting a project over to ReactART, and I've noticed the lack of support for an Ellipse component, and other non-primitive shapes, which are include in the ART library, but remain unexposed.

Is there either:
— a way to do this performantly by directly rendering the ellipse.js module?
— (or) an expected update for ReactART to support them?

I tried writing it myself, but I'm coming across several issues.

Here's my code below for reference, just in case anyone can help....

var Ellipse = createComponent('Ellipse', {
   mountComponent: function() {
    this.node = Ellipse();
    this.applyShapeProps(BLANK_PROPS, this.props);
    return this.node;
  },
  receiveComponent: function(nextComponent, transaction) {
    var props = nextComponent.props;
    this.applyShapeProps(this.props, props);
    this.props = props;
  },
  applyShapeProps: function(oldProps, props) {
    this.applyRenderableProps(oldProps, props);
  }
});

(This causes an error when instance.construct.apply(instance, arguments); is called in the ConvinienceConstructor)

Using react-art in an ASP.NET MVC6 application

The ASP.NET MVC6 application comes with bower only for the client side package management, so can't use react-art because there is no bower package for it.

Is there any plan to create a bower version of react-art?

Publish examples to Github pages

For us window shoppers :-)

Add more tutorials and a better readme

Hy!

I would like to use it but I find it difficult now.

At least add your example ( http://jsfiddle.net/JMZc5/1/ ) as it helped me more than the readme in the repo.

Also some philosophy and best practices would be a help. Thanks for this repo anyway (:

Does not work with [email protected]

In a project I can't run [email protected] and [email protected] together. So, I had to uninstall [email protected] and make changes in the config.sys for react-art to use [email protected]. When I run the app, I get the following error:

Error loading http://localhost:5000/jspm_packages/npm/[email protected]/lib/emptyObject.js

Release on npm as CommonJS compatible package

Now as we have react package on npm it would be nice to have react-art to be CommonJS/npm compatible.

Clipping mask with custom shape

Hi, can clipping mask be made with custom shape? If yes, how? Thanks.

Surface render problem.

Hi,
I'm facing a problem rendering the Surface component.

Here is my component:

export default class RangeBar extends React.Component {
  render() {
    return (
      <div style={{ width: '300px', height: '100px' }}>
        <Surface
          width={300}
          height={100}
          style={{ cursor: 'pointer' }}>
            <Group x={0} y={0}>
              <Shape fill="#7BC7BA" d="M0 0 h 100 v 5 h -100 Z" />
            </Group>
        </Surface>
      </div>
    );
  }
}

What happens is that I get this error:

Uncaught TypeError: element.getContext is not a function
Class.initialize    @   surface.js:25
proto.constructor   @   class.js:10
React.createClass.componentDidMount @   ReactART.js:190

Looking at https://github.com/reactjs/react-art/blob/master/src/ReactART.js#L190 the this.domNode passed to Mode.Surface() isn't a dom node, but a react element.

Is this a bug or am I missing something?

Thanks :)