React-rough-fiber NPM

React Rough Fiber

banner

react-rough-fiber -- A React renderer for rendering hand-drawn SVGs.

Installation

npm install react-rough-fiber react-reconciler

If you are using React 17, you need to install react-reconciler@0.26.2

Quick Start

To render the SVG in a hand-drawn style, you only need to add three lines of code:

import { RoughSVG } from 'react-rough-fiber'
export default function App() {
  return (
    <RoughSVG>
      <svg viewBox="0 0 128 128" width="128" height="128">
        <circle cx={64} cy={64} r={48} stroke="currentColor" fill="#82ca9d" />
      </svg>
    </RoughSVG>
  )
}

simply-circle

Usage

react-rough-fiber can integrate with many existing SVG-based libraries:

API

Full Documentation.

RoughSVG

import { RoughSVG } from "react-rough-fiber";
// ... your component code
<RoughSVG containerType="div" options={options}>
{/* your SVG */}
</RoughSVG>

containerType = 'div': The type of container to use for the RoughSVG. Optional.
options: RoughOptions | ((shape: SVGShape, props: React.HTMLAttributes) => RoughOptions = {}. It can be a RoughOptions for Rough.js. Also support a function that returns RoughOptions. Optional.

WCRoughSVG

WCRoughSVG is only compatible with React version 18.0.0 or later.

import { WCRoughSVG } from "react-rough-fiber";
// ... your component code
<WCRoughSVG containerType="div" options={options}>
{/* your SVG */}
</WCRoughSVG>

If you want to use context in RoughSVG, you can use WCRoughSVG instead of RoughSVG. See FAQ for more details.

All parameters of WCRoughSVG are identical to RoughSVG.