sauban / react-rough

:boom: React Components for Rough.js

React Bindings for Rough.js

Installation

- npm add react-rough
- npm add roughjs

Note: The documentation is for the beta release. For the stable release check out the master branch

Render a Rectangle

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

render(
	<ReactRough width={220} height={220}>
		<Rectangle points={[10, 10, 200, 200]} fill="red" fillWeight={3} />
	</ReactRough>
);

Note: All shapes must be nested within a ReactRough Component, it could have other surrounding elements, but it's GrandParent must be a ReactRough 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}>
		<Circle points={[50, 50, 80]} fill="red" />
		<Polygon
			points={[[[690, 130], [790, 140], [750, 240], [690, 220]]]}
			fill="blue"
			stroke="green"
		/>
	</ReactRough>
);

Examples

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

License

MIT