{"id":21054574,"url":"https://github.com/bowen7/react-rough-fiber","last_synced_at":"2025-04-09T03:14:36.757Z","repository":{"id":154165985,"uuid":"612493309","full_name":"Bowen7/react-rough-fiber","owner":"Bowen7","description":"A React renderer for rendering hand-drawn SVGs.","archived":false,"fork":false,"pushed_at":"2025-03-07T13:32:55.000Z","size":2812,"stargazers_count":421,"open_issues_count":2,"forks_count":9,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-01T19:20:37.140Z","etag":null,"topics":["hand-drawn","hand-drawn-graphs","react","react-renderer","roughjs","svg","svg-icons"],"latest_commit_sha":null,"homepage":"https://react-rough-fiber.amind.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Bowen7.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["Bowen7"],"patreon":null,"open_collective":null,"ko_fi":"bowen7","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2023-03-11T05:21:13.000Z","updated_at":"2025-03-21T03:49:21.000Z","dependencies_parsed_at":"2024-01-15T02:30:34.559Z","dependency_job_id":"1d717eb1-9efa-43fd-bffb-c955e0bce734","html_url":"https://github.com/Bowen7/react-rough-fiber","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bowen7%2Freact-rough-fiber","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bowen7%2Freact-rough-fiber/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bowen7%2Freact-rough-fiber/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bowen7%2Freact-rough-fiber/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Bowen7","download_url":"https://codeload.github.com/Bowen7/react-rough-fiber/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247968377,"owners_count":21025823,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hand-drawn","hand-drawn-graphs","react","react-renderer","roughjs","svg","svg-icons"],"created_at":"2024-11-19T16:14:53.028Z","updated_at":"2025-04-09T03:14:36.739Z","avatar_url":"https://github.com/Bowen7.png","language":"TypeScript","funding_links":["https://github.com/sponsors/Bowen7","https://ko-fi.com/bowen7"],"categories":[],"sub_categories":[],"readme":"# React Rough Fiber\n\n![banner](https://user-images.githubusercontent.com/27432981/233581368-3b8bb5e1-5d18-48ff-b0ee-89d78abb7796.png)\n\n[![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://choosealicense.com/licenses/mit/)\n[![NPM](https://img.shields.io/npm/v/react-rough-fiber)](https://www.npmjs.com/package/react-rough-fiber)\n[![Build](https://img.shields.io/github/actions/workflow/status/bowen7/react-rough-fiber/npm-publish.yml)](https://github.com/Bowen7/react-rough-fiber/actions/workflows/npm-publish.yml)\n\n\n`react-rough-fiber` -- A React renderer for rendering hand-drawn SVGs.\n\n## Installation\n\n``` bash\nnpm install react-rough-fiber react-reconciler\n```\n\n\u003e 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\n\n## Quick Start\n\nTo render the SVG in a hand-drawn style, you only need to add three lines of code:\n``` js\nimport { RoughSVG } from 'react-rough-fiber'\nexport default function App() {\n  return (\n    \u003cRoughSVG\u003e\n      \u003csvg viewBox=\"0 0 128 128\" width=\"128\" height=\"128\"\u003e\n        \u003ccircle cx={64} cy={64} r={48} stroke=\"currentColor\" fill=\"#82ca9d\" /\u003e\n      \u003c/svg\u003e\n    \u003c/RoughSVG\u003e\n  )\n}\n```\n\n![simply-circle](https://user-images.githubusercontent.com/27432981/233627411-dcc63b21-317c-4b85-8a55-92d39322df10.png)\n\n\n## Usage\n\nreact-rough-fiber can integrate with many existing SVG-based libraries:\n\n- [Icon](https://react-rough-fiber.amind.app/examples/icon)\n- Chart\n  - [recharts](https://react-rough-fiber.amind.app/examples/chart/recharts)\n  - [visx](https://react-rough-fiber.amind.app/examples/chart/visx)\n  - [react-d3-tree](https://react-rough-fiber.amind.app/examples/chart/react-d3-tree)\n- [Text](https://react-rough-fiber.amind.app/examples/text)\n- [SVG string](https://react-rough-fiber.amind.app/examples/svg-string)\n- [Remote SVG](https://react-rough-fiber.amind.app/examples/remote-svg)\n- [Emoji](https://react-rough-fiber.amind.app/examples/emoji)\n\n![image](https://user-images.githubusercontent.com/27432981/233629588-34c66519-1ae0-45de-beaa-f9dfedf635f3.png)\n\n![image](https://user-images.githubusercontent.com/27432981/233627832-7f7a1a87-485c-4220-a483-17bb6b93f4ea.png)\n\n## API\n\n[Full Documentation](https://react-rough-fiber.amind.app/apis).\n\n### RoughSVG\n\n``` jsx\nimport { RoughSVG } from \"react-rough-fiber\";\n// ... your component code\n\u003cRoughSVG containerType=\"div\" options={options}\u003e\n{/* your SVG */}\n\u003c/RoughSVG\u003e\n```\n\n- containerType = 'div': The type of container to use for the `RoughSVG`. Optional.\n- options: RoughOptions | ((shape: SVGShape, props: React.HTMLAttributes\u003cSVGElement\u003e) =\u003e 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.\n\n### WCRoughSVG\n\n\u003e `WCRoughSVG` is only compatible with React version 18.0.0 or later.\n\n``` jsx\nimport { WCRoughSVG } from \"react-rough-fiber\";\n// ... your component code\n\u003cWCRoughSVG containerType=\"div\" options={options}\u003e\n{/* your SVG */}\n\u003c/WCRoughSVG\u003e\n```\n\nIf 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.\n\nAll parameters of `WCRoughSVG` are identical to `RoughSVG`.\n\n## Development\n\nThis library is a monorepo project. The core package can be found under `/packages/react-rough-fiber`, and the docs are under `/apps/docs`\n\n- clone this repo\n- run `pnpm install` to install dependencies\n- run `pnpm dev`, and open `localhost:3000` to view the documentation.\n- run `pnpm test` to run tests.\n\nPRs are welcome!\n\n## How does it work?\n\nSee [my blog](https://www.bowencodes.com/post/react-rough-fiber).\n\n## Showcases\n\n- [Add your project by creating a PR](https://github.com/Bowen7/react-rough-fiber/pulls)\n\n## Credits\n\nreact-rough-fiber is powered or inspired by these open source projects:\n\n- [roughjs](https://github.com/rough-stuff/rough)\n- [nextra](https://github.com/shuding/nextra)\n- [perfect-freehand](https://github.com/steveruizok/perfect-freehand)\n- [react-three-fiber](https://github.com/pmndrs/react-three-fiber)\n- [preact](https://github.com/preactjs/preact)\n- [shadcn/ui](https://github.com/shadcn/ui)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbowen7%2Freact-rough-fiber","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbowen7%2Freact-rough-fiber","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbowen7%2Freact-rough-fiber/lists"}