{"id":16247873,"url":"https://github.com/jcblw/react-scribble","last_synced_at":"2025-07-19T13:40:02.298Z","repository":{"id":42791381,"uuid":"273160443","full_name":"jcblw/react-scribble","owner":"jcblw","description":"React scribble is a react component that allows you to draw to the canvas using hooks.","archived":false,"fork":false,"pushed_at":"2023-03-05T01:11:02.000Z","size":1252,"stargazers_count":5,"open_issues_count":24,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-10T05:55:35.472Z","etag":null,"topics":["canvas","creative-coding","react"],"latest_commit_sha":null,"homepage":"https://react-scribble.jcblw.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jcblw.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2020-06-18T06:34:35.000Z","updated_at":"2023-03-07T04:01:10.000Z","dependencies_parsed_at":"2024-10-28T09:36:23.476Z","dependency_job_id":null,"html_url":"https://github.com/jcblw/react-scribble","commit_stats":{"total_commits":26,"total_committers":2,"mean_commits":13.0,"dds":"0.11538461538461542","last_synced_commit":"42bedb6c48f2925da4b3943b5d7d39818c2ac060"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcblw%2Freact-scribble","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcblw%2Freact-scribble/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcblw%2Freact-scribble/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcblw%2Freact-scribble/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jcblw","download_url":"https://codeload.github.com/jcblw/react-scribble/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244014135,"owners_count":20383715,"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":["canvas","creative-coding","react"],"created_at":"2024-10-10T14:39:05.395Z","updated_at":"2025-03-19T19:31:33.390Z","avatar_url":"https://github.com/jcblw.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ✍️ React Scribble\n\nReact scribble is a react component that allows you to draw to canvas using hooks. This means that you can write individual component to draw a canvas in a declarative way.\n\n[Site](https://react-scribble.jcblw.vercel.app)\n\n![example of scribble](./assets/example.gif)\n\n## Why\n\nUsing canvas, and using the canvas api is fun. I had this idea of composing different canvas element together without nerfing the canvas api. This allows full access to the canvas api.\n\n## Install\n\n```shell\nnpm install react-scribble --save\n# or\nyarn add react-scribble\n```\n\n## Usage\n\nYou will need to setup the canvas and then use hooks to access the draw function.\n\n### Setting up a canvas\n\nScribble outputs a component called Canvas. Render it and give it a height and width.\n\n```javascript\nimport { Canvas } from 'react-scribble'\n\nconst MyCoolAppComponent = () =\u003e {\n  return (\n    \u003cCanvas loop width={window.innerWidth} height={window.innerHeight}\u003e\n      {/* my projects components */}\n    \u003c/Canvas\u003e\n  )\n}\n```\n\n### Hooking into the draw\n\nThe hook allows you to pass a function to the useDraw hook, and that hook will be called every time the canvas is drawn.\n\n```javascript\nimport { useCallback } from 'react'\nimport { useDraw } from 'react-scribble'\n\nconst Circle = ({ x, y }) =\u003e {\n  // TEMP: draw functions currently need something\n  // to stop the reference to stop updating\n  const drawCircle = useCallback(\n    (ctx, canvas) =\u003e {\n      ctx.fillStyle = 'tomato'\n      ctx.beginPath()\n      ctx.arc(x, y, 50, 0, Math.PI * 2, true)\n      ctx.fill()\n    },\n    [x, y]\n  )\n\n  useDraw(drawCircle) // draws the circle\n\n  return null // you can return dom element here too.\n}\n```\n\n### Composing all together\n\nThen add the components with the draw hook into the canvas.\n\n```javascript\nconst MyCoolAppComponent = () =\u003e {\n  return (\n    \u003cCanvas loop width={window.innerWidth} height={window.innerHeight}\u003e\n      \u003cCircle x={100} y={100} /\u003e\n      \u003cCircle x={window.innerWidth / 2} y={window.innerWidth / 2} /\u003e\n    \u003c/Canvas\u003e\n  )\n}\n```\n\nThis should two circles to the canvas.\n\n### Reseting the DOM view.\n\nThe view currently is not setup to handle viewing dom nodes above the canvas. That can easily be change by using the stage component.\n\n```javascript\nimport { Canvas, Stage } from 'react-scribble'\n\nconst MyCoolAppComponent = () =\u003e {\n  return (\n    \u003cCanvas loop width={window.innerWidth} height={window.innerHeight}\u003e\n      \u003cStage\u003e\n        \u003cp\u003e Now i am on the dom in front of the canvas \u003c/p\u003e\n      \u003c/Stage\u003e\n    \u003c/Canvas\u003e\n  )\n}\n```\n\n## More examples\n\nView the [examples](./examples) directory for more examples of how to use this component.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcblw%2Freact-scribble","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjcblw%2Freact-scribble","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcblw%2Freact-scribble/lists"}