/react-rough

:rabbit2: React Components for Rough.js

Primary LanguageTypeScriptMIT LicenseMIT

React Bindings for Rough.js

Netlify Status npm downloads/month Known Vulnerabilities pullrequest firsttimersonly

Add a rudimentary Text element

This isn't very clever - mostly because I don't know TypeScript and because the underlying Rough.JS has a whole bunch of options baked into it that don't really apply to text.

Anyway:

<Text x={..} y={..} size="10px" /* optional */ text="hello world" />

Installation

- npm add jan-g/react-rough#text
- npm add jan-g/roughjs#text

You'll probably want to add a font-family to the svg element in your stylesheet; this does none of that.

Render a Rectangle on a canvas element

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

render(
	<ReactRough>
		<Rectangle x={15} y={15} width={90} height={80} fill="red" />
	</ReactRough>
);

Learn More

To learn more, go through our StoryBook.

Visit the Website Storybook Preview

License

MIT