React-handy-renderer NPM

react-handy-renderer

✏️ Draw 2D primitives in sketchy style with React

Install

npm install react-handy-renderer

Usage

react-handy-renderer exposes a set of five primitives:

Rectangle
RoundedRect
Line
Curve
Ellipse

and one wrapper component called Paper which serves as a canvas on which these primitives are drawn.

Here is a basic example -

import React from 'react';
import { render, Paper, Ellipse } from 'react-handy-renderer';

function Sketch() {
  return (
    <Paper bowing={0.2} width={600} height={500}>
      <Ellipse
        position={{ x: 480, y: 100 }}
        width={50}
        height={50}
        color="mistyrose"
        weight={0.9}
        roughness={3}
      />
    </Paper>    
  );
}

render(<Sketch />, document.getElementById('canvas-container'));

Examples

RoundedRect

bounded-rect

<RoundedRect
  position={{ x: 300, y: 100 }}
  width={50}
  height={50}
  color="red"
  weight={2}
  radius={2}
  roughness={1.8}
/>

Rectangle

rectangle

<Rectangle
  position={{ x: 390, y: 100 }}
  width={50}
  height={50}
  color="green"
  weight={1}
  roughness={2.3}
/>

Ellipse

ellipse

<Ellipse
  position={{ x: 480, y: 100 }}
  width={50}
  height={50}
  color="blue" // or color={[10, 10, 10, 20]}
  weight={0.9}
  roughness={3}
  bowing={9}
  maxOffset={10}
/>

Line

line

<Line
  from={{ x: 230, y: 140 }}
  to={{ x: 530, y: 140 }}
  weight={4}
  color="mistyrose"
  roughness={2}
/>

Curve

curve

<Curve
  c1={{ x: 30, y: 50 }}
  c2={{ x: 70, y: 90 }}
  c3={{ x: 130, y: 510 }}
  c4={{ x: 230, y: 200 }}
  color="blue"
  weight={2}
  roughness={2}
/>

Usage with ReactDOM renderer

You can also render the primitives when working with ReactDOM as this just renders to a canvas node.

Example -

import React, { Component } from 'react'
import {
  render as create,
  Paper,
  Rectangle,
  Main,
  Ellipse,
  Line,
  RoundedRect,
  Curve,
} from 'react-handy-renderer'

function Sketch() {
  return (
    <Paper bowing={0.2} width={500} height={500}>
      <Line
        from={{x: 10, y: 40}}
        to={{x: 40, y: 60}}
        weight={10}
        color="red"
      />
    </Paper>
  )
}

// Renders the canvas node
create(<Sketch />, document.getElementById('root'))

// create function has already rendered the canvas node.
// So now you can continue to use React with ReactDOM as you used to.
// Make changes directly to the <Sketch /> component.
class App extends Component {
  render() {
    return (
      <div>
        REACT HANDY RENDERER
      </div>
    )
  }
}

export default App