React Rough Fiber

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

Installation

npm install react-rough-fiber react-reconciler

If you are using React 18, you need to install react-reconciler@0.29.2; If you are still using React 17, you can 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>
  )
}

Usage

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

• Icon
• Chart
• recharts
• visx
• react-d3-tree
• Text
• SVG string
• Remote SVG
• Emoji

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.

Development

This library is a monorepo project. The core package can be found under /packages/react-rough-fiber, and the docs are under /apps/docs

• clone this repo
• run pnpm install to install dependencies
• run pnpm dev, and open localhost:3000 to view the documentation.
• run pnpm test to run tests.

PRs are welcome!

How does it work?

See my blog.

Showcases

• Add your project by creating a PR

Credits

react-rough-fiber is powered or inspired by these open source projects:

• roughjs
• nextra
• perfect-freehand
• react-three-fiber
• preact
• shadcn/ui

License

MIT