Package Exports
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-rough-fiber) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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:
API
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 returnsRoughOptions
. 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 openlocalhost:3000
to view the documentation. - run
pnpm test
to run tests.
PRs are welcome!
How does it work?
See my blog.
Showcases
Credits
react-rough-fiber is powered or inspired by these open source projects:
License
MIT