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.

Latest Release (next): Check this guide which uses a very simple render prop approach.

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