React Bindings for Rough.js
-welcome-brightgreen.svg?style=flat){kind=icon}
- npm add react-rough
- npm add [email protected]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.
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>
);- CodeSandBox
- ReactRough animated logo
- Add yours...
MIT