{"id":25126693,"url":"https://github.com/react-paper/react-paper-bindings","last_synced_at":"2025-04-05T09:10:43.915Z","repository":{"id":38272117,"uuid":"50114372","full_name":"react-paper/react-paper-bindings","owner":"react-paper","description":"Paper.js bindings for React","archived":false,"fork":false,"pushed_at":"2023-03-04T01:25:58.000Z","size":11616,"stargazers_count":195,"open_issues_count":19,"forks_count":37,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-29T08:09:51.249Z","etag":null,"topics":["canvas","paperjs","react","reactfiber","reconciler"],"latest_commit_sha":null,"homepage":"http://react-paper.github.io/react-paper-bindings/","language":"JavaScript","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/react-paper.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}},"created_at":"2016-01-21T14:50:44.000Z","updated_at":"2025-01-24T16:12:08.000Z","dependencies_parsed_at":"2023-07-17T20:25:40.599Z","dependency_job_id":"b7adbfc0-bba5-4df5-b24b-68c0872e2a82","html_url":"https://github.com/react-paper/react-paper-bindings","commit_stats":{"total_commits":152,"total_committers":21,"mean_commits":7.238095238095238,"dds":0.3355263157894737,"last_synced_commit":"3e6b9cb952ed286c233a419f310909d15a8396d7"},"previous_names":["hribb/react-paper-bindings"],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-paper%2Freact-paper-bindings","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-paper%2Freact-paper-bindings/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-paper%2Freact-paper-bindings/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-paper%2Freact-paper-bindings/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-paper","download_url":"https://codeload.github.com/react-paper/react-paper-bindings/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247312085,"owners_count":20918344,"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","paperjs","react","reactfiber","reconciler"],"created_at":"2025-02-08T10:24:23.005Z","updated_at":"2025-04-05T09:10:43.882Z","avatar_url":"https://github.com/react-paper.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Paper.js bindings for React Fiber\n\n## Demo\n\nhttp://react-paper.github.io/react-paper-bindings/\n\n## Development\n\nStart watching `src` with babel\n```\ncd react-paper-bindings\nnpm start\n```\n\nLink the library to the demo\n```\n# npm link the library\ncd react-paper-bindings\nnpm link\n\ncd demo\nnpm link react-paper-bindings\n```\n\nStart demo with `create-react-app`\n```\ncd demo\nnpm start\n```\n\nIf someone knows a better way, please let me know ;)\n\n## Similar projects\n\n- [react-paperjs](https://github.com/psychobolt/react-paperjs)\n\n## Example\n\n```jsx\nimport React, { Component } from 'react'\n\nimport {\n  View,\n  Layer,\n  Group,\n  Path,\n  Circle,\n  Ellipse,\n  Rectangle,\n  PointText,\n  Tool,\n} from 'react-paper-bindings'\n\nconst ReactLogo = ({ rotation, x, y }) =\u003e {\n  return (\n    \u003cGroup name={'reactLogo'} rotation={rotation}\u003e\n      \u003cEllipse\n        center={[x, y]}\n        size={[70, 25]}\n        strokeWidth={2.5}\n        strokeColor={'#61DAFB'}\n      /\u003e\n      \u003cEllipse\n        center={[x, y]}\n        rotation={120}\n        size={[70, 25]}\n        strokeWidth={2.5}\n        strokeColor={'#61DAFB'}\n      /\u003e\n      \u003cEllipse\n        center={[x, y]}\n        rotation={240}\n        size={[70, 25]}\n        strokeWidth={2.5}\n        strokeColor={'#61DAFB'}\n      /\u003e\n      \u003cCircle\n        center={[x, y]}\n        fillColor={'#61DAFB'}\n        radius={7}\n      /\u003e\n    \u003c/Group\u003e\n  )\n}\n\nconst Paper = ({ activeTool, circles, rectangles, width, height }) =\u003e {\n  return (\n    \u003cView activeTool={activeTool} width={width} height={height}\u003e\n      \u003cLayer\u003e\n        {circles.map(circle =\u003e \u003cCircle {...circle} /\u003e)}\n      \u003c/Layer\u003e\n      \u003cLayer\u003e\n        {rectangles.map(rectangle =\u003e \u003cRectangle {...rectangle} /\u003e)}\n      \u003c/Layer\u003e\n      \u003cLayer\u003e\n        \u003cRectangle\n          center={[width/2, height/2]}\n          fillColor={'#222222'}\n          opacity={0.8}\n          size={[320, 120]}\n        /\u003e\n        \u003cPointText\n          content={'Paper.js'}\n          fillColor={'white'}\n          fontFamily={'Courier New'}\n          fontSize={30}\n          fontWeight={'bold'}\n          justification={'center'}\n          point={[(width/2)+40, (height/2)+10]}\n        /\u003e\n        \u003cReactLogo\n          rotation={rotation}\n          x={(width/2)-100}\n          y={(height/2)}\n        /\u003e\n      \u003c/Layer\u003e\n      \u003cTool\n        active={activeTool === 'move'}\n        name={'move'}\n        onMouseDown={props.moveToolMouseDown}\n        onMouseDrag={props.moveToolMouseDrag}\n        onMouseUp={props.moveToolMouseUp}\n      /\u003e\n      \u003cTool\n        active={activeTool === 'pen'}\n        name={'pen'}\n        onMouseDown={props.penToolMouseDown}\n        onMouseDrag={props.penToolMouseDrag}\n        onMouseUp={props.penToolMouseUp}\n      /\u003e\n      \u003cTool\n        active={activeTool === 'circle'}\n        name={'circle'}\n        onMouseDown={props.addCircle}\n      /\u003e\n      \u003cTool\n        active={activeTool === 'rectangle'}\n        name={'rectangle'}\n        onMouseDown={props.addRectangle}\n      /\u003e\n    \u003c/View\u003e\n  )\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-paper%2Freact-paper-bindings","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-paper%2Freact-paper-bindings","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-paper%2Freact-paper-bindings/lists"}