README.md

React Bindings for Rough.js

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

• ReactRough animated logo
• Add yours...

License

MIT