React Bindings for Rough.js

Installation

- npm add react-rough
- npm add [email protected]

Render a Rectangle

import ReactRough from 'react-rough';

const options = {
	points: [10, 10, 200, 200], // x, y, width, height
	fill: 'red',
	fillWeight: 3
};

render(
	<ReactRough width={220} height={220}>
		<ReactRough.Rectangle options={options} />
	</ReactRough>
);

Note: A Static Method must be nested within a ReactRough Component, it could have other surrounding elements, but it's GrandParent must be a Rough Component

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 multiple shapes on one canvas element

import { ReactRough, Rectangle, Circle } from 'react-rough';

render(
	<ReactRough width={200} height={400}>
		<ReactRough.Circle points={[50, 50, 80]} fill="red" />
		<ReactRough.Polygon
			points={[[690, 130], [790, 140], [750, 240], [690, 220]]}
			fill="blue"
			stroke="green"
		/>
	</ReactRough>
);

Examples

• CodeSandBox
• ReactRough animated logo
• Add yours...

License

MIT