{"id":16892097,"url":"https://github.com/zhanba/react-g","last_synced_at":"2025-03-22T08:31:16.365Z","repository":{"id":42743182,"uuid":"240195928","full_name":"zhanba/react-g","owner":"zhanba","description":"Building visualization component in declarative and composable way.","archived":false,"fork":false,"pushed_at":"2023-01-06T12:10:56.000Z","size":7305,"stargazers_count":4,"open_issues_count":14,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-25T07:44:18.831Z","etag":null,"topics":["canvas","react"],"latest_commit_sha":null,"homepage":"","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/zhanba.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-02-13T06:51:30.000Z","updated_at":"2023-11-23T10:37:33.000Z","dependencies_parsed_at":"2023-02-06T01:15:28.329Z","dependency_job_id":null,"html_url":"https://github.com/zhanba/react-g","commit_stats":null,"previous_names":[],"tags_count":39,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhanba%2Freact-g","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhanba%2Freact-g/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhanba%2Freact-g/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhanba%2Freact-g/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zhanba","download_url":"https://codeload.github.com/zhanba/react-g/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244931480,"owners_count":20534008,"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","react"],"created_at":"2024-10-13T17:10:02.138Z","updated_at":"2025-03-22T08:31:15.528Z","avatar_url":"https://github.com/zhanba.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-g\n\n[![NPM version][npm-image-core]][npm-url-core]\n\n[npm-image-core]: https://img.shields.io/npm/v/@react-g/core?label=%40react-g%2Fcore\u0026style=plastic\n[npm-url-core]: http://npmjs.org/package/@react-g/core\n\n[![NPM version][npm-image-component]][npm-url-component]\n\n[npm-image-component]: https://img.shields.io/npm/v/@react-g/component?label=%40react-g%2Fcomponent\u0026style=plastic\n[npm-url-component]: http://npmjs.org/package/@react-g/core\n\n[![NPM version][npm-image-hooks]][npm-url-hooks]\n\n[npm-image-hooks]: https://img.shields.io/npm/v/@react-g/hooks?label=%40react-g%2Fhooks\u0026style=plastic\n[npm-url-hooks]: http://npmjs.org/package/@react-g/core\n\nBuilding visualization component in declarative and composable way.\n\n\n## Install\n\n```sh\nnpm i @react-g/core\nnpm i @react-g/component\nnpm i @react-g/hooks\n```\n\n## Example\n\n```tsx\nimport React, { useState, useEffect } from 'react';\nimport { Canvas, Group, Rect, Text } from '@react-g/core';\n\nconst App: React.FC = () =\u003e {\n  const [color, setColor] = useState('yellow');\n\n  useEffect(() =\u003e {\n    const timer = setTimeout(() =\u003e {\n      setColor('green');\n    }, 3000);\n    return () =\u003e clearTimeout(timer);\n  }, []);\n\n  return (\n    \u003cCanvas width={1000} height={800}\u003e\n      \u003cGroup\u003e\n        \u003cRect x={10} y={10} width={100} height={50} fill={color} stroke=\"#456734\" /\u003e\n        \u003cText x={200} y={60} text=\"test\" fill=\"black\" /\u003e\n      \u003c/Group\u003e\n    \u003c/Canvas\u003e\n  );\n};\n\nexport default App;\n```\n\n## Doc\n\n- [@react-g/core](./packages/core/README.md)\n- [@react-g/component](./packages/component/README.md)\n- [@react-g/hooks](./packages/hooks/README.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhanba%2Freact-g","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzhanba%2Freact-g","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhanba%2Freact-g/lists"}