node package manager
We need your input. Help make JavaScript better: Take the 2017 JavaScript Ecosystem survey »

react-rough

React Bindings for Rough.js

npm travis pullrequest firsttimersonly

Usage

Grab the Shape to be rendered from ReactRough, pass some options to it, pass an optional onRender hook to spin up some animation logic or so. ### Render a Rectangle

import { Rectangle } from 'react-rough';
 
const options = {
  data: [10, 10, 200, 200], // x, y, width, height 
  fill: 'red',
  fillWeight: 3
}
 
render(
  <Rectangle width={220} height={220} options={options}/>
);

When you grab a shape from ReactRough, it renders each shape to a canvas element. So how can we render different shapes on a single canvas element? We'll answer that below.

Render shapes on one canvas element

import { ReactRough, Rectangle, Circle } from 'react-rough';
 
render(
  <ReactRough width={500} height={500}>
    <Rectangle options={{
        data: [10, 10, 200, 200], // x, y, width, height 
        fill: 'red',
        fillWeight: 3
      }}/>
    <Circle options={{
      data: [80, 120, 50], // centerX, centerY, radius 
      fill: 'blue'
    }}/>
  </ReactRough>
);

onRender hook

We can have the hook on a shape element, ReactRough element or both. Here's an example on a shape element.

const increaseWidth = rect => {
  if (rect.width < 200) {
    rect.width = rect.width + 10;
    setTimeout(() => increaseWidth(rect), 100);
  }
};
 
const options = {
  data: [10,10,20,100],
  fill: 'red',
  hachureGap: 8
};
 
render (
  <Rectangle width={220} height={220} options={options} onRender={increaseWidth}/>
);

This increases the rectangle's width from 20px to 200px. Wanna see it in action on a ReactRough component? Check out our ReactRough animated logo example.

Examples

License

MIT