React Rough Versions Save

Prior to this version, you would have to wrap each Rough Components (Rectangle, Circle, ...) on your own with memo to prevent it from re-rendering when one of the components changes. We made sure to take care of that for you.

Also, we were using a function from useEffect to get the renderer type which was less performant. We also made sure to avoid that as well.

Bumped Rough version to support

• Seeding
• No strokes (stroke value of none)
• Faster and better algorithm

Thanks to the Roughjs team for these awesome updates ?

What's new about this release:

• Maintains Roughjs default signature.

<ReactRough>
  <Rectangle
    fill="red"
    height={80}
    width={80}
    x={15}
    y={15}
  />
</ReactRough>

• It was re-written with Typescript in strict mode. It's fully typed.
• Integrated Storybook with Typescript doc gen and knobs to help users build fast.

Big Shout out @ashinzekene for his help with this release.

?Breaking changes from previous version (v1+) ?

Version 2 comes with exciting features. We decided to make a pre-release before an official release so we could try it out and give feedback, and we also need to add a few more things.

What do we get from this release:

• Renderer: one of the hottest features in the release. With this, we could decide to render as svg instead of the regular canvas. Canvas is default tho. #128
• redraw method to take care of animation with Rough Components. #127
• Exporting Components which would take care of tree shaking #126

Thanks to @paradoxxxzero and @MiroslavPetrik for these updates. We owe it to them :tada:

:warning: Breaking Change. API changed. But these are the things you'll get in the new release:

• Proper Components Structure
• Adequate Tests with Jest
• Test Code Coverage
• Proper Errors for non supported inputs

Have Fun :tada:

How to use:

npm install react-rough@next

Example: https://github.com/ooade/react-rough/blob/master/examples/basic/index.js

:warning: Breaking Change :warning: The new API comes with a breaking change. It's not intended, but it's for the best.

Installation

 npm install react-rough@next

Usage

For now ReactRough takes render prop and gives you the rough canvas instance, so you could do whatever you wish with it.

This API will not likely change so it's safe to use. I'd just add Rough Components (Circle, Arc, e.t.c), work on docs and make a full release.

import ReactRough from 'react-rough'

render(<ReactRough
		width="500"
		height="200"
		render={rc => {
			rc.circle(80, 120, 50) // centerX, centerY, diameter
			rc.ellipse(300, 100, 150, 80) // centerX, centerY, width, height
			rc.line(80, 120, 300, 100) // x1, y1, x2, y2
		}}
	/>)

• cleans up DOM when Unmounted
• returns null; no component returned
• allow nested components