Rough React Wrapper

This is a React wrapper for Rough.js, a JavaScript library for creating sketchy, hand-drawn graphics.

rough-react-wrapper is an alternative for the archived react-rough package published by ooade. The mentioned package has been archived by its owner, and we needed same react wrapper for rough.js drawable objects. So, I decided to publish another version of this wrapper with more feature supports.

🟢 If you are already using the archived react-rough package in your projects, you can simply install this new rough-react-wrapper package, and your code will work like a charm! The API is exactly similar, but with some more feature supports:

• React 18 support
• NextJs app router and server side components support

Installation

You can add rough-react-wrapper to your project via npm.

npm install rough-react-wrapper

Usage

To render a rectangle svg in sketchy and hand-drawn style, add these lines into your React component:

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

return (
    <ReactRough
        renderer={"svg"}
        width={250}
        height={250}
    >
      <Rectangle
          width={200}
          height={200}
          x={10}
          y={10}
          fill="#6700c9"
          fillStyle={"cross-hatch"}
      />
  </ReactRough>
)

It will generate a rectangle shape like this:

Props

| name | type | default | description | | ------------------------- | ---------------------------------------------------------------- | --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | roughness | number | 1 | Indicates how rough the drawing is. A rectangle with the roughness of 0 would be a perfect rectangle. There is no upper limit to this value, but a value over 10 is mostly useless. | | bowing | number | 1 | Indicates how curvy the lines are when drawing a sketch. | | seed | number | 0 | Sets the seed for creating random values used in shape generation. This is useful for creating the exact shape when re-generating with the same parameters. The value of seed is between 1 and 2^31. If seed is not defined, or set to 0, no seed is used when computing random values. | | stroke | string | black | Represents the color used to paint the outline of the drawn objects. If this is set to none, the shape vectors do not contain a stroke (This is different from having a transparent stroke). | | strokeWidth | number | 1 | Sets the width of the strokes (in pixels). | | fill | string | transparent | Represents the color used to fill a shape. In hachure style fills, this represents the color of the hachure lines. In dots style, it represents the color of the dots. | | fillStyle | enum from Fill Styles | hachure | Represents the filling style of an object. | | fillWeight | number | half of the strokeWidth value | Represents the width of the hachure lines. | | hachureAngle | number | -41 degree | Defines the angle of the hachure lines (in degrees). | | hachureGap | number | four times of the strokeWidth value | Defines the average gap between two hachure lines (in pixels). | | curveStepCount | number | 9 | When drawing ellipses, circles, and arcs, RoughJS approximates curveStepCount number of points to estimate the shape. | | curveFitting | number | 0.95 | When drawing ellipses, circles, and arcs, Let RoughJS know how close should the rendered dimensions be when compared to the specified one. A value of 1 will ensure that the dimensions are almost 100% accurate. | | strokeLineDash | array of numbers | [] | Sets the line dash pattern. Use this property if you want the stroke to be dashed (this does not affect the hachure and other fills of the shape). Set its value as described in setLineDash method of canvas. | | strokeLineDashOffset | number | 0 | Sets the line dash offset. Use this property if you want the stroke to be dashed. This is akin to the lineDashOffset of canvas. | | fillLineDash | array of numbers | [] | Similar to the strokeLineDash property but it affects the fills, not the stroke. eg. when you want hachure lines to be dashed. | | fillLineDashOffset | number | 0 | Similar to the strokeLineDashOffset property but it affects the fills, not the stroke. | | disableMultiStroke | boolean | true | Indicates if roughjs should or should not apply multiple strokes to sketch the shape. | | disableMultiStrokeFill | boolean | true | Indicates if roughjs should or should not apply multiple strokes to sketch the hachure lines to fill the shape. | | simplification | number | 0 | When drawing paths using SVG path instructions, simplification can be set to simplify the shape by the specified factor. For example, a path with 100 points and a simplification value of 0.5 will estimate the shape to about 50 points. This will give more complex shapes a sketchy feel. The value should be between 0 and 1. | | dashOffset | number | value of hachureGap | Indicates the nominal length of dash (in pixels) when filling a shape using the dashed style. | | dashGap | number | value of hachureGap | Indicates the nominal gap between dashes (in pixels) when filling a shape using the dashed style. | | zigzagOffset | number | value of hachureGap | Indicates the nominal width of the zig-zag triangle in each line when filling a shape using the zigzag-line style. | | preserveVertices | boolean | false | When randomizing shapes do not randomize locations of the end points. e.g. end points of line or a curve. |

Fill Styles

| value | description | example | | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | hachure | Draws sketchy parallel lines with the same roughness as defined by the roughness and the bowing properties of the shape. It can be further configured using the fillWeight, hachureAngle, and hachureGap properties. | | | solid | Like a conventional fill. | | | zigzag | Draws zig-zag lines filling the shape. | | | cross-hatch | Similar to hachure, but draws cross hatch lines (akin to two hachure fills 90 degrees from each other). | | | dots | Fills the shape with sketchy dots. | | | dashed | Similar to hachure but the individual lines are dashed. Dashes can be configured using the dashOffset and dashGap properties. | | | zigzag-line | Similar to hachure but individual lines are drawn in a zig-zag fashion. The size of the zig-zag can be configured using the zigzagOffset proeprty. | |

You can also check props specification in rough.js documentation

Playground

You can find a CodeSandbox demo here

Credits

rough.js react is inspired by these open source projects:

• roughjs
• react-rough
• react-rough-fiber

License

MIT