React Bindings for Rough.js
-welcome-brightgreen.svg?style=flat-square){kind=icon}
- npm add react-rough
- npm add roughjsNote: The documentation is for the beta release. For the stable release check out the master branch
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.
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>
);- CodeSandBox
- ReactRough animated logo
- Add yours...
MIT