react-rough-fiber -- A React renderer for rendering hand-drawn SVGs.
npm install react-rough-fiber react-reconcilerIf 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
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>
)
}
react-rough-fiber can integrate with many existing SVG-based libraries:
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
RoughOptionsfor Rough.js. Also support a function that returnsRoughOptions. Optional.
WCRoughSVGis 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.
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 installto install dependencies - run
pnpm dev, and openlocalhost:3000to view the documentation. - run
pnpm testto run tests.
PRs are welcome!
See my blog.
react-rough-fiber is powered or inspired by these open source projects:
MIT
