ReactRough

Simple ReactRough implementation

by jonahe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-rough.umd.js"></script>
<div class="container">
</div>

Babel + JSX

const { Arc, Circle, Polygon, Rectangle, ReactRough: Rough } = ReactRough;

const colorize = rough => {
  rough.fill = 'green';
  rough.strokeWidth = 0.195;
  rough.stroke = 'rgba(0,0,0,0.1)';
}

const animate = rough => {
	//setInterval(() => rough.requestDraw(), 200);
}

const onRenderRough = rough => {
	colorize(rough);
  animate(rough);
}

const App = () => (
  <Rough width={350} height={320} onRender={onRenderRough}>
    <Rectangle options={{data:[10, 10, 40, 300]}}/>
    <Arc options={{data: [50, 85, 180, 150, -Math.PI / 2, Math.PI / 2, true]}}/>
    <Polygon options={{data: [[48, 160], [120, 310], [140, 290], [70, 155]]}}/>
    <Arc options={{ 
        data: [50, 85, 80, 50, -Math.PI / 2, Math.PI / 2, true],
        fill: '#f7f7f7',
        fillStyle: 'solid'
    }}/>
    
    <Circle options={{data:[170, 300, 10]}}/>
    
    <Rectangle options={{data:[210, 10, 40, 300]}}/>
    <Arc options={{data: [250, 85, 180, 150, -Math.PI / 2, Math.PI / 2, true]}}/>
    <Polygon options={{data: [[248, 160], [320, 310], [340, 290], [270, 155]]}}/>
    <Arc options={{ 
        data: [250, 85, 80, 50, -Math.PI / 2, Math.PI / 2, true],
        fill: '#f7f7f7',
        fillStyle: 'solid'
    }}/>
  </Rough>
);

ReactDOM.render(<App />, document.querySelector('.container'));