using in react? about rough

[ooade]

Hi! I've bin busy but I quickly made an update.

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
		}}
	/>)

[martpie]

You can probably use this library in combination of the componentDidMount function for first draw, and componentWillUpdate for subsequent redraws (if your drawings are dependent of your component props).

[pshihn]

I'm not a react guy, but someone posted a snippet on Twitter that you may find useful: https://twitter.com/LefiTarik/status/973360236764463105

[martpie]

I could try doing React components, should not be too hard as the lib is quite small. I'll see if I have time this week-end.

[martpie]

aaaand nevermind, it already exists https://www.npmjs.com/package/react-rough I think this can be closed.

[pshihn]

Actually that react imp is for the previous beta version of roughjs. I have since rewritten the code for a simpler API. Maybe you can update that particular package? or create a new one. Don't think that one would work with the new api.

[martpie]

Yep I could do that

ooade/react-rough#95

[pshihn]

@ooade My bad on changing the API on you. It was early and no one was using it at the time. Sorry about that.