react-rough-fiber

v0.0.5

Published

6 months ago

A React renderer for rendering hand-drawn SVGs.

Downloads

119

0High
0Medium
0Low

bbbowen

react react-renderer svg svg-icons hand-drawn roughjs hand-drawn-graphs

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 [email protected]

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.

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:

License

MIT