Skip to content

sarscoder/react-rough

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Bindings for Rough.js

npm travis code coverage Known Vulnerabilities pullrequest firsttimersonly

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

License

MIT

About

🐇 React Components for Rough.js

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 93.3%
  • JavaScript 6.7%