https://github.com/Bowen7/react-rough-fiber
A React renderer for rendering hand-drawn SVGs.
https://github.com/Bowen7/react-rough-fiber
hand-drawn hand-drawn-graphs react react-renderer roughjs svg svg-icons
Last synced: 1 day ago
JSON representation
A React renderer for rendering hand-drawn SVGs.
- Host: GitHub
- URL: https://github.com/Bowen7/react-rough-fiber
- Owner: Bowen7
- License: mit
- Created: 2023-03-11T05:21:13.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-04-28T14:49:35.000Z (14 days ago)
- Last Synced: 2025-04-28T15:39:31.935Z (14 days ago)
- Topics: hand-drawn, hand-drawn-graphs, react, react-renderer, roughjs, svg, svg-icons
- Language: TypeScript
- Homepage: https://react-rough-fiber.amind.app
- Size: 2.68 MB
- Stars: 424
- Watchers: 2
- Forks: 9
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-react-renderer - react-rough-fiber - A React renderer for rendering hand-drawn SVGs. (Web (+ NW & Electron))
README
# React Rough Fiber
[](https://choosealicense.com/licenses/mit/)
[](https://www.npmjs.com/package/react-rough-fiber)
[](https://github.com/Bowen7/react-rough-fiber/actions/workflows/npm-publish.yml)
`react-rough-fiber` -- A React renderer for rendering hand-drawn SVGs.
## Installation
``` bash
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:
``` js
import { RoughSVG } from 'react-rough-fiber'
export default function App() {
return (
)
}
```
## Usage
react-rough-fiber can integrate with many existing SVG-based libraries:
- [Icon](https://react-rough-fiber.amind.app/examples/icon)
- Chart
- [recharts](https://react-rough-fiber.amind.app/examples/chart/recharts)
- [visx](https://react-rough-fiber.amind.app/examples/chart/visx)
- [react-d3-tree](https://react-rough-fiber.amind.app/examples/chart/react-d3-tree)
- [Text](https://react-rough-fiber.amind.app/examples/text)
- [SVG string](https://react-rough-fiber.amind.app/examples/svg-string)
- [Remote SVG](https://react-rough-fiber.amind.app/examples/remote-svg)
- [Emoji](https://react-rough-fiber.amind.app/examples/emoji)
## API
[Full Documentation](https://react-rough-fiber.amind.app/apis).
### RoughSVG
``` jsx
import { RoughSVG } from "react-rough-fiber";
// ... your component code
{/* your SVG */}
```
- 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](https://github.com/rough-stuff/rough/wiki#options). Also support a function that returns `RoughOptions`. Optional.
### WCRoughSVG
> `WCRoughSVG` is only compatible with React version 18.0.0 or later.
``` jsx
import { WCRoughSVG } from "react-rough-fiber";
// ... your component code
{/* your SVG */}
```
If you want to use context in `RoughSVG`, you can use `WCRoughSVG` instead of `RoughSVG`. See [FAQ](https://react-rough-fiber.amind.app/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](https://www.bowencodes.com/post/react-rough-fiber).
## Showcases
- [Add your project by creating a PR](https://github.com/Bowen7/react-rough-fiber/pulls)
## Credits
react-rough-fiber is powered or inspired by these open source projects:
- [roughjs](https://github.com/rough-stuff/rough)
- [nextra](https://github.com/shuding/nextra)
- [perfect-freehand](https://github.com/steveruizok/perfect-freehand)
- [react-three-fiber](https://github.com/pmndrs/react-three-fiber)
- [preact](https://github.com/preactjs/preact)
- [shadcn/ui](https://github.com/shadcn/ui)
## License
MIT