How to use react-art - 10 common examples
To help you get started, we’ve selected a few react-art examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
talldan / hex-demo / src / js / index.js View on Github 
// libs
container
.register('React', React, { maker: 'fixed' })
.register('_', require('lodash'), { maker: 'fixed' })
.register('rsvp', require('rsvp'), { maker: 'fixed' })
.register('eventEmitter', function() { return new Events.EventEmitter() })
.register('seedrandom', require('seedrandom'), { maker: 'fixed' })
.register('displayHelper', require('./utilities/displayHelper'), { maker: 'singleton' });
// components
container
.register('Surface', ReactArt.Surface, { maker : 'fixed' })
.register('Group', ReactArt.Group, { maker : 'fixed' })
.register('Path', ReactArt.Path, { maker : 'fixed' })
.register('Shape', ReactArt.Shape, { maker : 'fixed' })
.register('App', require('./components/app.jsx'))
.register('GameBoard', require('./components/game-board.jsx'))
.register('HexGrid', require('./components/hex-grid.jsx'))
.register('HexTile', require('./components/hex-tile.jsx'));
// mixins
container
.register('PureRenderMixin', React.addons.PureRenderMixin, { maker: 'fixed' });
var React = container.get('React');
var AppElement = React.createElement(container.get('App'));
React.render(AppElement, document.body);var _ = require('underscore');
var React = require('react');
var ReactART = require('react-art');
var Group = ReactART.Group;
var Path = ReactART.Path;
var Shape = ReactART.Shape;
var Surface = ReactART.Surface;
var Text = ReactART.Text;
var Pattern = ReactART.Pattern;
var circlePath = function(r) {
return new Path()
.moveTo(0, -r)
// Two arcs make a circle
.arcTo(0, r, r, r, true)
.arcTo(0, -r, r, r, true)
.close();
};
var linePath = function(x1, y1, x2, y2) {
return new Path()var _ = require('underscore');
var React = require('react');
var ReactART = require('react-art');
var Group = ReactART.Group;
var Path = ReactART.Path;
var Shape = ReactART.Shape;
var Surface = ReactART.Surface;
var Text = ReactART.Text;
var Pattern = ReactART.Pattern;
var circlePath = function(r) {
return new Path()
.moveTo(0, -r)
// Two arcs make a circle
.arcTo(0, r, r, r, true)
.arcTo(0, -r, r, r, true)
.close();
};
var linePath = function(x1, y1, x2, y2) {
return new Path()
.moveTo(x1, y1)import React from 'react';
import ReactArt from 'react-art';
import ImmutablePropTypes from 'react-immutable-proptypes';
import {Map} from 'immutable';
import Colors from '../styles/Colors.js';
import EventTypes from '../update/EventTypes.js';
import {relMouseCoords} from './utils/DrawingUtils.js';
import {getKeyCombo} from '../utils/KeyboardShortcuts.js';
const Surface = ReactArt.Surface;
const addPropsAndCreate = (extraProps) => (element) => {
// https://facebook.github.io/react/docs/multiple-components.html#dynamic-children
const props = Object.assign({key: element.props.id}, extraProps || {}, element.props);
return React.createElement(element.component, props);
};
const toJS = e => e.toJS();
const convert = {
mousedown: EventTypes.CanvasMouseDown,
mousemove: EventTypes.CanvasMouseMove,
mouseup: EventTypes.CanvasMouseUp,
keydown: EventTypes.KeyDown
};var Events = require('events');
var indejection = require('indejection');
var container = indejection();
// libs
container
.register('React', React, { maker: 'fixed' })
.register('_', require('lodash'), { maker: 'fixed' })
.register('rsvp', require('rsvp'), { maker: 'fixed' })
.register('eventEmitter', function() { return new Events.EventEmitter() })
.register('seedrandom', require('seedrandom'), { maker: 'fixed' })
.register('displayHelper', require('./utilities/displayHelper'), { maker: 'singleton' });
// components
container
.register('Surface', ReactArt.Surface, { maker : 'fixed' })
.register('Group', ReactArt.Group, { maker : 'fixed' })
.register('Path', ReactArt.Path, { maker : 'fixed' })
.register('Shape', ReactArt.Shape, { maker : 'fixed' })
.register('App', require('./components/app.jsx'))
.register('GameBoard', require('./components/game-board.jsx'))
.register('HexGrid', require('./components/hex-grid.jsx'))
.register('HexTile', require('./components/hex-tile.jsx'));
// mixins
container
.register('PureRenderMixin', React.addons.PureRenderMixin, { maker: 'fixed' });
var React = container.get('React');
var AppElement = React.createElement(container.get('App'));
React.render(AppElement, document.body);var _ = require('underscore');
var React = require('react');
var ReactART = require('react-art');
var Group = ReactART.Group;
var Path = ReactART.Path;
var Shape = ReactART.Shape;
var Surface = ReactART.Surface;
var Text = ReactART.Text;
var Pattern = ReactART.Pattern;
var circlePath = function(r) {
return new Path()
.moveTo(0, -r)
// Two arcs make a circle
.arcTo(0, r, r, r, true)
.arcTo(0, -r, r, r, true)
.close();
};
var linePath = function(x1, y1, x2, y2) {
return new Path()
.moveTo(x1, y1)
.lineTo(x2, y2);var _ = require('underscore');
var React = require('react');
var ReactART = require('react-art');
var Group = ReactART.Group;
var Path = ReactART.Path;
var Shape = ReactART.Shape;
var Surface = ReactART.Surface;
var Text = ReactART.Text;
var Pattern = ReactART.Pattern;
var circlePath = function(r) {
return new Path()
.moveTo(0, -r)
// Two arcs make a circle
.arcTo(0, r, r, r, true)
.arcTo(0, -r, r, r, true)
.close();
};
var linePath = function(x1, y1, x2, y2) {
return new Path()
.moveTo(x1, y1)var _ = require('underscore');
var React = require('react');
var ReactART = require('react-art');
var Group = ReactART.Group;
var Path = ReactART.Path;
var Shape = ReactART.Shape;
var Surface = ReactART.Surface;
var Text = ReactART.Text;
var Pattern = ReactART.Pattern;
var circlePath = function(r) {
return new Path()
.moveTo(0, -r)
// Two arcs make a circle
.arcTo(0, r, r, r, true)
.arcTo(0, -r, r, r, true)
.close();
};
var linePath = function(x1, y1, x2, y2) {var indejection = require('indejection');
var container = indejection();
// libs
container
.register('React', React, { maker: 'fixed' })
.register('_', require('lodash'), { maker: 'fixed' })
.register('rsvp', require('rsvp'), { maker: 'fixed' })
.register('eventEmitter', function() { return new Events.EventEmitter() })
.register('seedrandom', require('seedrandom'), { maker: 'fixed' })
.register('displayHelper', require('./utilities/displayHelper'), { maker: 'singleton' });
// components
container
.register('Surface', ReactArt.Surface, { maker : 'fixed' })
.register('Group', ReactArt.Group, { maker : 'fixed' })
.register('Path', ReactArt.Path, { maker : 'fixed' })
.register('Shape', ReactArt.Shape, { maker : 'fixed' })
.register('App', require('./components/app.jsx'))
.register('GameBoard', require('./components/game-board.jsx'))
.register('HexGrid', require('./components/hex-grid.jsx'))
.register('HexTile', require('./components/hex-tile.jsx'));
// mixins
container
.register('PureRenderMixin', React.addons.PureRenderMixin, { maker: 'fixed' });
var React = container.get('React');
var AppElement = React.createElement(container.get('App'));
React.render(AppElement, document.body);var _ = require('underscore');
var React = require('react');
var ReactART = require('react-art');
var Group = ReactART.Group;
var Path = ReactART.Path;
var Shape = ReactART.Shape;
var Surface = ReactART.Surface;
var Text = ReactART.Text;
var Pattern = ReactART.Pattern;
var circlePath = function(r) {
return new Path()
.moveTo(0, -r)
// Two arcs make a circle
.arcTo(0, r, r, r, true)
.arcTo(0, -r, r, r, true)
.close();
};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).
