{"id":15396997,"url":"https://github.com/ryanhefner/react-canvas-wrapper","last_synced_at":"2025-04-16T00:23:53.729Z","repository":{"id":30118767,"uuid":"123986448","full_name":"ryanhefner/react-canvas-wrapper","owner":"ryanhefner","description":"🖼 React component that wraps a canvas element and offers a clean API for drawing.","archived":false,"fork":false,"pushed_at":"2024-12-12T07:24:28.000Z","size":1664,"stargazers_count":4,"open_issues_count":8,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T03:12:05.041Z","etag":null,"topics":["canvas","react","react-component"],"latest_commit_sha":null,"homepage":"https://www.pkgstats.com/pkg:react-canvas-wrapper","language":"JavaScript","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/ryanhefner.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":"ryanhefner","patreon":"ryanhefner","open_collective":"ryanhefner","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2018-03-05T22:21:37.000Z","updated_at":"2023-03-04T04:12:36.000Z","dependencies_parsed_at":"2024-06-20T22:00:02.602Z","dependency_job_id":"60b96159-9d80-4ed8-9494-5f787c0245dd","html_url":"https://github.com/ryanhefner/react-canvas-wrapper","commit_stats":{"total_commits":115,"total_committers":6,"mean_commits":"19.166666666666668","dds":0.4608695652173913,"last_synced_commit":"ee79bf39c1530abd389175ee0c381b15fe6a7397"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Freact-canvas-wrapper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Freact-canvas-wrapper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Freact-canvas-wrapper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Freact-canvas-wrapper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryanhefner","download_url":"https://codeload.github.com/ryanhefner/react-canvas-wrapper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249174568,"owners_count":21224746,"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","react-component"],"created_at":"2024-10-01T15:35:41.437Z","updated_at":"2025-04-16T00:23:53.693Z","avatar_url":"https://github.com/ryanhefner.png","language":"JavaScript","funding_links":["https://github.com/sponsors/ryanhefner","https://patreon.com/ryanhefner","https://opencollective.com/ryanhefner"],"categories":[],"sub_categories":[],"readme":"# 🖼 react-canvas-wrapper\n\n![npm](https://img.shields.io/npm/v/react-canvas-wrapper?style=flat-square)\n![NPM](https://img.shields.io/npm/l/react-canvas-wrapper?style=flat-square)\n![npm](https://img.shields.io/npm/dt/react-canvas-wrapper?style=flat-square)\n![Coveralls github](https://img.shields.io/coveralls/github/ryanhefner/react-canvas-wrapper?style=flat-square)\n![CircleCI](https://img.shields.io/circleci/build/github/ryanhefner/react-canvas-wrapper?style=flat-square)\n![Snyk Vulnerabilities for GitHub Repo](https://img.shields.io/snyk/vulnerabilities/github/ryanhefner/react-canvas-wrapper?style=flat-square)\n\n\nReact component that wraps a canvas element and offers a clean API for drawing.\n\n## Install\n\nVia [NPM](https://npmjs.com/package/react-canvas-wrapper)\n\n```sh\nnpm install --save react-canvas-wrapper\n```\n\nVia [Yarn](https://yarn.fyi/react-canvas-wrapper)\n\n```sh\nyarn add react-canvas-wrapper\n```\n\n## How to use\n\n**Properties**\n\n* `canvasRef:Function` - Function to set reference to `\u003ccanvas\u003e` element. (Default: `(element) =\u003e { this.canvas = element; }`)\n* `draw:Function` - Callback called when props change on the component. (Default: `(canvas) =\u003e {}`)\n* `width:Number` - Width of the canvas @ 1x. (Default: `30`)\n* `height:Number` - Height of the canvas @ 1x. (Default: `30`)\n* `pixelRatioAware:Boolean` - Flag that triggers whether or not the `\u003ccanvas\u003e` should be sized contextually based on the `devicePixelRatio`. (Default: `true`)\n\n**Example - Canvas `ref`**\n\n```js\nimport {Canvas} from 'react-canvas-wrapper';\n\n...\n\n  componentWillReceiveProps(nextProps) {\n    this.refreshCanvas();\n  }\n\n  refreshCanvas() {\n    const canvas = ReactDOM.findDOMNode(this.canvas);\n    const context = canvas.getContext('2d');\n\n    /**\n     * ...Perform canvas magic here...\n     */\n  }\n\n  render() {\n    return (\n      \u003cCanvas canvasRef={(element) =\u003e { this.canvas = element; }} /\u003e\n    );\n  }\n\n```\n\n**Example - Custom `draw` method**\n\n```js\nimport {Canvas} from 'react-canvas-wrapper';\n\n...\n  constructor(props) {\n    super(props);\n\n    this.draw = this.draw.bind(this);\n  }\n\n  draw(canvas) {\n    const node = ReactDOM.findDOMNode(canvas);\n    const context = node.getContext('2d');\n\n    if (!context) {\n      return;\n    }\n\n    const {\n      progress,\n    } = this.props;\n\n    const pixelRatio = window.devicePixelRatio || 1;\n    const width = 30 * pixelRatio;\n    const height = 30 * pixelRatio;\n    const backgroundColor = 'grey';\n    const color = 'black';\n\n    context.clearRect(0, 0, width, height);\n    context.fillStyle = backgroundColor;\n    context.beginPath();\n    context.arc(\n      (width / 2),\n      (height / 2),\n      (width / 2),\n      0,\n      Math.PI * 2\n    );\n    context.fill();\n\n    context.fillStyle = color;\n    context.beginPath();\n    context.arc(\n      (width / 2),\n      (height / 2),\n      ((width * progress) / 2),\n      0,\n      Math.PI * 2\n    );\n    context.fill();\n  }\n\n  render() {\n    return (\n      \u003cCanvas draw={this.draw} /\u003e\n    );\n  }\n\n...\n\n```\n\n## Responsive Canvas\n\nThis component recognizes the `devicePixelRatio` of the device/browser they are running\nin, so the canvas is properly sized in order to keep the graphics crisp and clean, assuming that you haven’t set the `pixelRatioAware` to `false`.\nSo, feel free to set the size or dimensions based on a `1x` scale and the component\nwill adjust those accordingly.\n\nAlthough, keep in mind that if you decide to pass in your own custom `draw` function\nyou’ll have to account for the `devicePixelRatio` within your drawing commands.\n\n## License\n\n[MIT](LICENSE) © [Ryan Hefner](https://www.ryanhefner.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanhefner%2Freact-canvas-wrapper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanhefner%2Freact-canvas-wrapper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanhefner%2Freact-canvas-wrapper/lists"}