Skip to content

Latest commit

 

History

History
122 lines (83 loc) · 4.09 KB

README.md

File metadata and controls

122 lines (83 loc) · 4.09 KB
Raw

React Rough Fiber

banner

MIT License NPM Build

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:

image

image

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

Credits

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

License

MIT