{"_id":"@blinkorb/rcx","_rev":"8-c73c042b7a9137599648ecba618d2357","name":"@blinkorb/rcx","dist-tags":{"latest":"0.1.3"},"versions":{"0.0.0":{"name":"@blinkorb/rcx","version":"0.0.0","keywords":["canvas","jsx","view","library","reactive","html5","game"],"author":{"name":"BlinkOrb"},"license":"MIT","_id":"@blinkorb/rcx@0.0.0","maintainers":[{"name":"jakesidsmith","email":"hello@jakesidsmith.com"}],"homepage":"https://github.com/blinkorb/rcx#readme","bugs":{"url":"https://github.com/blinkorb/rcx/issues"},"dist":{"shasum":"04556526a418c6ffeb9fbaa8c3a8430dfd3f9873","tarball":"https://registry.npmjs.org/@blinkorb/rcx/-/rcx-0.0.0.tgz","fileCount":66,"integrity":"sha512-NowyKNlRcuRxXODjCMqr0YAH6LyxRnv40rTqoFuzYebVna2AGBmxxz7CyTiecYECOW/Sw0RtEGsov1wdd+r2oA==","signatures":[{"sig":"MEUCIQC8ixNJi/7dJ8sw63yuYPQObTrHtTpo/3z6Iw0+4jDEHAIgP6MJq6gwB4DsmtNfSGng7HQHuDnWVr5DlUP7AU9CN0Y=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":62274},"main":"./src/index.ts","type":"module","exports":{".":{"import":"./src/index.ts"},"./hooks":{"import":"./src/hooks/index.ts"},"./utils":{"import":"./src/utils/index.ts"},"./canvas":{"import":"./src/components/canvas/index.ts"},"./context":{"import":"./src/context/index.ts"},"./components":{"import":"./src/components/index.ts"},"./jsx-runtime":{"import":"./src/jsx-runtime.ts"}},"gitHead":"0f496ba4841607cbf7f408a914aade7d63aa0987","scripts":{"dev":"tsb serve","dist":"npm run build","lint":"eslint '**/*.{ts,tsx,js,jsx}'","test":"npm run format-check && npm run typecheck && npm run lint && npm run tests","build":"rm -rf dist && tsc -p tsconfig.dist.json --rewriteRelativeImportExtensions && node scripts/prep-package.js","start":"npm run dev","tests":"jest --coverage --runInBand","format":"prettier --write *","typecheck":"tsc --noEmit","format-check":"prettier --check *","prepublishOnly":"npm run test && npm run dist"},"_npmUser":{"name":"jakesidsmith","email":"hello@jakesidsmith.com"},"repository":{"url":"git+https://github.com/blinkorb/rcx.git","type":"git"},"_npmVersion":"10.9.2","description":"Reactive JSX-based library for creating HTML5 canvas applications","directories":{},"_nodeVersion":"22.14.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","eslint":"^8.57.0","ts-jest":"^29.2.4","ts-node":"^10.9.2","prettier":"^3.3.3","typescript":"^5.7.3","@types/jest":"^29.5.12","@jakesidsmith/tsb":"^3.0.2","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.2.1","@typescript-eslint/parser":"^7.17.0","@typescript-eslint/eslint-plugin":"^7.17.0","eslint-plugin-simple-import-sort":"^12.1.1"},"_npmOperationalInternal":{"tmp":"tmp/rcx_0.0.0_1769290670128_0.8185432886774335","host":"s3://npm-registry-packages-npm-production"}},"0.0.1":{"name":"@blinkorb/rcx","version":"0.0.1","keywords":["canvas","jsx","view","library","reactive","html5","game"],"author":{"name":"BlinkOrb"},"license":"MIT","_id":"@blinkorb/rcx@0.0.1","maintainers":[{"name":"jakesidsmith","email":"hello@jakesidsmith.com"}],"homepage":"https://github.com/blinkorb/rcx#readme","bugs":{"url":"https://github.com/blinkorb/rcx/issues"},"dist":{"shasum":"9b80d9e2ee64203900aeac30b947a8b41ebecfa5","tarball":"https://registry.npmjs.org/@blinkorb/rcx/-/rcx-0.0.1.tgz","fileCount":145,"integrity":"sha512-GwVs6AahVE64CYTlBTWKenWX90i3caUsAq4Hp3WjvF2DXlTPBZb4E+W1+qxdphsTn/oxxXtHMkfPWdy4aMMkzg==","signatures":[{"sig":"MEUCIQCQjUZalDHsbqzawk6FwmULen+KuRnY8IPsZSrwQQbUmgIgHnt+LuvLeupg87tWU4k00oP9d0bpWoezAN/qBGEfxSw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":130011},"main":"./index.js","type":"module","types":"./index.d.ts","exports":{".":{"import":"./index.js"},"./hooks":{"import":"./hooks/index.js"},"./utils":{"import":"./utils/index.js"},"./canvas":{"import":"./components/canvas/index.js"},"./context":{"import":"./context/index.js"},"./components":{"import":"./components/index.js"},"./jsx-runtime":{"import":"./jsx-runtime.js"}},"gitHead":"6bc18a5f1af071d427ef0a709141fa708be1de69","scripts":{},"_npmUser":{"name":"jakesidsmith","email":"hello@jakesidsmith.com"},"repository":{"url":"git+https://github.com/blinkorb/rcx.git","type":"git"},"_npmVersion":"10.9.2","description":"Reactive JSX-based library for creating HTML5 canvas applications","directories":{},"_nodeVersion":"22.14.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","eslint":"^8.57.0","ts-jest":"^29.2.4","ts-node":"^10.9.2","prettier":"^3.3.3","typescript":"^5.7.3","@types/jest":"^29.5.12","@jakesidsmith/tsb":"^3.0.2","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.2.1","@typescript-eslint/parser":"^7.17.0","@typescript-eslint/eslint-plugin":"^7.17.0","eslint-plugin-simple-import-sort":"^12.1.1"},"_npmOperationalInternal":{"tmp":"tmp/rcx_0.0.1_1769308004405_0.9448736169399454","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@blinkorb/rcx","version":"0.0.2","keywords":["canvas","jsx","view","library","reactive","html5","game"],"author":{"name":"BlinkOrb"},"license":"MIT","_id":"@blinkorb/rcx@0.0.2","maintainers":[{"name":"jakesidsmith","email":"hello@jakesidsmith.com"}],"homepage":"https://github.com/blinkorb/rcx#readme","bugs":{"url":"https://github.com/blinkorb/rcx/issues"},"dist":{"shasum":"bab425b86d991387736028334ce45ed9e53b1814","tarball":"https://registry.npmjs.org/@blinkorb/rcx/-/rcx-0.0.2.tgz","fileCount":148,"integrity":"sha512-ptmFZO0gq0epWJAl7JrGXP5E97rJafxNE4VIctI7CtrmT7A+a7hWQ4bTa1Mi7ugoh9iSa8zmWwWm1W8cvTggbw==","signatures":[{"sig":"MEQCIBp9wl45mi571E56ReCYKMeGNumC9qRoqP8agR+lzlSwAiBILIIPFs/IYIuK1kFInhp7o3mdji8jZJKaXAwJEVziQw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":130502},"main":"./index.js","type":"module","types":"./index.d.ts","exports":{".":{"import":"./index.js"},"./hooks":{"import":"./hooks/index.js"},"./utils":{"import":"./utils/index.js"},"./canvas":{"import":"./components/canvas/index.js"},"./context":{"import":"./context/index.js"},"./components":{"import":"./components/index.js"},"./jsx-runtime":{"import":"./jsx-runtime.js"},"./jsx-dev-runtime":{"import":"./jsx-dev-runtime.js"}},"gitHead":"05686c853bc2a509f3117bfc69978a9ddd52c0d8","scripts":{},"_npmUser":{"name":"jakesidsmith","email":"hello@jakesidsmith.com"},"repository":{"url":"git+https://github.com/blinkorb/rcx.git","type":"git"},"_npmVersion":"10.9.2","description":"Reactive JSX-based library for creating HTML5 canvas applications","directories":{},"_nodeVersion":"22.14.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","eslint":"^8.57.0","ts-jest":"^29.2.4","ts-node":"^10.9.2","prettier":"^3.3.3","typescript":"^5.7.3","@types/jest":"^29.5.12","@jakesidsmith/tsb":"^3.0.2","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.2.1","@typescript-eslint/parser":"^7.17.0","@typescript-eslint/eslint-plugin":"^7.17.0","eslint-plugin-simple-import-sort":"^12.1.1"},"_npmOperationalInternal":{"tmp":"tmp/rcx_0.0.2_1769308832724_0.7782776671116822","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@blinkorb/rcx","version":"0.0.3","keywords":["canvas","jsx","view","library","reactive","html5","game"],"author":{"name":"BlinkOrb"},"license":"MIT","_id":"@blinkorb/rcx@0.0.3","maintainers":[{"name":"jakesidsmith","email":"hello@jakesidsmith.com"}],"homepage":"https://github.com/blinkorb/rcx#readme","bugs":{"url":"https://github.com/blinkorb/rcx/issues"},"dist":{"shasum":"71a3b1d8e09041f29f2e921cb89dd39681a9aad2","tarball":"https://registry.npmjs.org/@blinkorb/rcx/-/rcx-0.0.3.tgz","fileCount":149,"integrity":"sha512-0+Duwpu+PUDwdmIvmvdGfqF5CG3eUwqahq1H67wBDTdZ1hkKV1zfKjadzUKHhI9sK1JtUGpexlilrzQER6i4ug==","signatures":[{"sig":"MEUCIGvqmq8UYy0Qc7bR7n/WmJOZr0Zuamj5YkNtPZOcrNsZAiEAlhxPIltc89x9c3avOux7kul+GQo5++Wxp/IBILjUDqY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":143313},"main":"./index.js","type":"module","types":"./index.d.ts","exports":{".":{"import":"./index.js"},"./hooks":{"import":"./hooks/index.js"},"./utils":{"import":"./utils/index.js"},"./canvas":{"import":"./components/canvas/index.js"},"./context":{"import":"./context/index.js"},"./components":{"import":"./components/index.js"},"./jsx-runtime":{"import":"./jsx-runtime.js"},"./jsx-dev-runtime":{"import":"./jsx-dev-runtime.js"}},"gitHead":"817b67254efafe734a2ab65dacaa1aab293b6502","scripts":{},"_npmUser":{"name":"jakesidsmith","email":"hello@jakesidsmith.com"},"repository":{"url":"git+https://github.com/blinkorb/rcx.git","type":"git"},"_npmVersion":"10.9.2","description":"Reactive JSX-based library for creating HTML5 canvas applications","directories":{},"_nodeVersion":"22.14.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","eslint":"^8.57.0","ts-jest":"^29.2.4","ts-node":"^10.9.2","prettier":"^3.3.3","typescript":"^5.7.3","@types/jest":"^29.5.12","@jakesidsmith/tsb":"^3.0.2","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.2.1","@typescript-eslint/parser":"^7.17.0","@typescript-eslint/eslint-plugin":"^7.17.0","eslint-plugin-simple-import-sort":"^12.1.1"},"_npmOperationalInternal":{"tmp":"tmp/rcx_0.0.3_1772548352813_0.5314522029069793","host":"s3://npm-registry-packages-npm-production"}},"0.1.0":{"name":"@blinkorb/rcx","version":"0.1.0","keywords":["canvas","jsx","view","library","reactive","html5","game"],"author":{"name":"BlinkOrb"},"license":"MIT","_id":"@blinkorb/rcx@0.1.0","maintainers":[{"name":"jakesidsmith","email":"hello@jakesidsmith.com"}],"homepage":"https://github.com/blinkorb/rcx#readme","bugs":{"url":"https://github.com/blinkorb/rcx/issues"},"dist":{"shasum":"e19ffa5bc641945bf53ad3dc72300693cd6f3bf8","tarball":"https://registry.npmjs.org/@blinkorb/rcx/-/rcx-0.1.0.tgz","fileCount":149,"integrity":"sha512-U+sNYOLXVbucOBJkNroRFfJGRVg3vT12c4kbV3JvtPV8TVSkdge3/9zbEqSdEYsILddXoBX3TAn+lZX0Q/0XSg==","signatures":[{"sig":"MEQCIBXGKhdLnUs4W4zDGJ+HP5gm8O9LBn7zWVQ67Tt2raKMAiB5B/R/2oE3A+iKBbwpXQ/pAKx9DupT77aU5YLEqW1FlA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":144955},"main":"./index.js","type":"module","types":"./index.d.ts","exports":{".":{"import":"./index.js"},"./hooks":{"import":"./hooks/index.js"},"./utils":{"import":"./utils/index.js"},"./canvas":{"import":"./components/canvas/index.js"},"./context":{"import":"./context/index.js"},"./components":{"import":"./components/index.js"},"./jsx-runtime":{"import":"./jsx-runtime.js"},"./jsx-dev-runtime":{"import":"./jsx-dev-runtime.js"}},"gitHead":"b9412ffb15af0ab946bb3cd608e87297e80c9880","scripts":{},"_npmUser":{"name":"jakesidsmith","email":"hello@jakesidsmith.com"},"repository":{"url":"git+https://github.com/blinkorb/rcx.git","type":"git"},"_npmVersion":"10.9.2","description":"Reactive JSX-based library for creating HTML5 canvas applications","directories":{},"_nodeVersion":"22.14.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","eslint":"^8.57.0","ts-jest":"^29.2.4","ts-node":"^10.9.2","prettier":"^3.3.3","typescript":"^5.7.3","@types/jest":"^29.5.12","@jakesidsmith/tsb":"^3.0.2","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.2.1","@typescript-eslint/parser":"^7.17.0","@typescript-eslint/eslint-plugin":"^7.17.0","eslint-plugin-simple-import-sort":"^12.1.1"},"_npmOperationalInternal":{"tmp":"tmp/rcx_0.1.0_1775130057654_0.7399764798295281","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@blinkorb/rcx","version":"0.1.1","keywords":["canvas","jsx","view","library","reactive","html5","game"],"author":{"name":"BlinkOrb"},"license":"MIT","_id":"@blinkorb/rcx@0.1.1","maintainers":[{"name":"jakesidsmith","email":"hello@jakesidsmith.com"}],"homepage":"https://github.com/blinkorb/rcx#readme","bugs":{"url":"https://github.com/blinkorb/rcx/issues"},"dist":{"shasum":"36cb5247f551033e26e4f6bbb2ff47598b8625fd","tarball":"https://registry.npmjs.org/@blinkorb/rcx/-/rcx-0.1.1.tgz","fileCount":149,"integrity":"sha512-CBLtwmJ4l8gRCJztRk0mn6IKceXgdc8i4WhW/c+8+YE0vev/3WndcSyaWPlN1EEdX74fhxHrCTq7P2/5DrIRqQ==","signatures":[{"sig":"MEUCIEm7yTBaDgvh6I6w+j/E3/dnHhE8clMkzCBvbDQFmj/dAiEA72bump6ozmw/zD456IN5ZL+InAEaPZIyL/lVoRfTf9o=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":145199},"main":"./index.js","type":"module","types":"./index.d.ts","exports":{".":{"import":"./index.js"},"./hooks":{"import":"./hooks/index.js"},"./utils":{"import":"./utils/index.js"},"./canvas":{"import":"./components/canvas/index.js"},"./context":{"import":"./context/index.js"},"./components":{"import":"./components/index.js"},"./jsx-runtime":{"import":"./jsx-runtime.js"},"./jsx-dev-runtime":{"import":"./jsx-dev-runtime.js"}},"gitHead":"87e547cabef5e14b213d7b211333f261ce185b47","scripts":{},"_npmUser":{"name":"jakesidsmith","email":"hello@jakesidsmith.com"},"repository":{"url":"git+https://github.com/blinkorb/rcx.git","type":"git"},"_npmVersion":"10.9.2","description":"Reactive JSX-based library for creating HTML5 canvas applications","directories":{},"_nodeVersion":"22.14.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","eslint":"^8.57.0","ts-jest":"^29.2.4","ts-node":"^10.9.2","prettier":"^3.3.3","typescript":"^5.7.3","@types/jest":"^29.5.12","@jakesidsmith/tsb":"^3.0.2","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.2.1","@typescript-eslint/parser":"^7.17.0","@typescript-eslint/eslint-plugin":"^7.17.0","eslint-plugin-simple-import-sort":"^12.1.1"},"_npmOperationalInternal":{"tmp":"tmp/rcx_0.1.1_1775133762306_0.7749733610387444","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@blinkorb/rcx","version":"0.1.2","keywords":["canvas","jsx","view","library","reactive","html5","game"],"author":{"name":"BlinkOrb"},"license":"MIT","_id":"@blinkorb/rcx@0.1.2","maintainers":[{"name":"jakesidsmith","email":"hello@jakesidsmith.com"}],"homepage":"https://github.com/blinkorb/rcx#readme","bugs":{"url":"https://github.com/blinkorb/rcx/issues"},"dist":{"shasum":"229a5b628be56632227928570faea246c6781a3d","tarball":"https://registry.npmjs.org/@blinkorb/rcx/-/rcx-0.1.2.tgz","fileCount":149,"integrity":"sha512-CyGutUy8Ll2/bAXQYj7jMdNeu1YDG2eoRfCcl5/bHiNSpWk7LDHMmkf9e8TuXlECZbWDZ/Cntnytw7J+siuaMg==","signatures":[{"sig":"MEQCIHpxgdb8B4dqll1RPkXdL9rrKrcew4a7uv2TrgmL1blXAiBnaNA3xY9lF1WI2TrHHN7XoBVd3ikEcY6UCImmTA9oog==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":146514},"main":"./index.js","type":"module","types":"./index.d.ts","exports":{".":{"import":"./index.js"},"./hooks":{"import":"./hooks/index.js"},"./utils":{"import":"./utils/index.js"},"./canvas":{"import":"./components/canvas/index.js"},"./context":{"import":"./context/index.js"},"./components":{"import":"./components/index.js"},"./jsx-runtime":{"import":"./jsx-runtime.js"},"./jsx-dev-runtime":{"import":"./jsx-dev-runtime.js"}},"gitHead":"e98c9d3d9d12dfce61e10fa330200ba4fa19592f","scripts":{},"_npmUser":{"name":"jakesidsmith","email":"hello@jakesidsmith.com"},"repository":{"url":"git+https://github.com/blinkorb/rcx.git","type":"git"},"_npmVersion":"10.9.2","description":"Reactive JSX-based library for creating HTML5 canvas applications","directories":{},"_nodeVersion":"22.14.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","eslint":"^8.57.0","ts-jest":"^29.2.4","ts-node":"^10.9.2","prettier":"^3.3.3","typescript":"^5.7.3","@types/jest":"^29.5.12","@jakesidsmith/tsb":"^3.0.2","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.2.1","@typescript-eslint/parser":"^7.17.0","@typescript-eslint/eslint-plugin":"^7.17.0","eslint-plugin-simple-import-sort":"^12.1.1"},"_npmOperationalInternal":{"tmp":"tmp/rcx_0.1.2_1775135188730_0.8347500511169481","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@blinkorb/rcx","version":"0.1.3","description":"Reactive JSX-based library for creating HTML5 canvas applications","publishConfig":{"access":"public"},"type":"module","main":"./index.js","exports":{".":{"import":"./index.js"},"./root":{"import":"./root.js"},"./canvas":{"import":"./components/canvas/index.js"},"./components":{"import":"./components/index.js"},"./context":{"import":"./context/index.js"},"./hooks":{"import":"./hooks/index.js"},"./utils":{"import":"./utils/index.js"},"./jsx-runtime":{"import":"./jsx-runtime.js"},"./jsx-dev-runtime":{"import":"./jsx-dev-runtime.js"}},"scripts":{},"repository":{"type":"git","url":"git+https://github.com/blinkorb/rcx.git"},"keywords":["canvas","jsx","view","library","reactive","html5","game"],"author":{"name":"BlinkOrb"},"license":"MIT","bugs":{"url":"https://github.com/blinkorb/rcx/issues"},"homepage":"https://github.com/blinkorb/rcx#readme","devDependencies":{"@blinkorb/eslint-config-rcx-dev":"^0.0.0","@jakesidsmith/tsb":"^4.0.0","@types/jest":"^29.5.12","jest":"^29.7.0","ts-jest":"^29.2.4","ts-node":"^10.9.2","tsx":"^4.21.0","typescript":"^5.9.3"},"_id":"@blinkorb/rcx@0.1.3","gitHead":"473c8cf6f92bbd87a3bed1092ed2fd1a7f55fc75","types":"./index.d.ts","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-uR7NvLEIAcw2QeOKj1iOyovl54is+MuxVOJlG9P62US2zAbJ2OIhGpGzX0JYAy9Ss7BEtxgGLMmiyIFdstZiUg==","shasum":"c16a1e4de8c3ea2cf7053be328b2dfaf161943ee","tarball":"https://registry.npmjs.org/@blinkorb/rcx/-/rcx-0.1.3.tgz","fileCount":153,"unpackedSize":145399,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDavnay4XwFrv5H/znvtZFQXGgkxnCqy0J7Ge0y8C55vAIgBdKGmmTXq/0eIPtB7mTr8b7iAHUBt4suRfH8DyUTX54="}]},"_npmUser":{"name":"jakesidsmith","email":"hello@jakesidsmith.com"},"directories":{},"maintainers":[{"name":"jakesidsmith","email":"hello@jakesidsmith.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/rcx_0.1.3_1776866962756_0.6571091011392411"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-24T21:37:50.026Z","modified":"2026-04-22T14:09:23.040Z","0.0.0":"2026-01-24T21:37:50.267Z","0.0.1":"2026-01-25T02:26:44.567Z","0.0.2":"2026-01-25T02:40:32.885Z","0.0.3":"2026-03-03T14:32:32.976Z","0.1.0":"2026-04-02T11:40:57.828Z","0.1.1":"2026-04-02T12:42:42.506Z","0.1.2":"2026-04-02T13:06:28.910Z","0.1.3":"2026-04-22T14:09:22.905Z"},"bugs":{"url":"https://github.com/blinkorb/rcx/issues"},"author":{"name":"BlinkOrb"},"license":"MIT","homepage":"https://github.com/blinkorb/rcx#readme","keywords":["canvas","jsx","view","library","reactive","html5","game"],"repository":{"type":"git","url":"git+https://github.com/blinkorb/rcx.git"},"description":"Reactive JSX-based library for creating HTML5 canvas applications","maintainers":[{"name":"jakesidsmith","email":"hello@jakesidsmith.com"}],"readme":"# RCX\n\n**Reactive JSX-based library for creating HTML5 canvas applications**\n\n## Preamble\n\nThis library is in early development, and so the interfaces you interact with may change. We'll setup full documentation when the API stabilizes. For now the readme(s) should give you enough info to get started.\n\n## About\n\nRCX closely resembles other JSX-based view libraries such as React/Vue, but allows you to render to canvas. It can even be used in conjunction with other view libraries (see [Integrating With React](#integrating-with-react) example).\n\n## Installation\n\n```bash\nnpm i @blinkorb/rcx -P\n```\n\n## The Basics\n\n### TypeScript Config\n\nIn order to use RCX with TypeScript (if you are not already using another JSX-based library), you should set the following `compilerOptions` in your `tsconfig.json`:\n\n```json\n{\n  \"compilerOptions\": {\n    \"jsx\": \"react-jsx\",\n    \"jsxImportSource\": \"@blinkorb/rcx\"\n  }\n}\n```\n\n### Entry Point\n\nAll components in RCX are function components. To get started you should create an `App` component that renders the `Canvas` component.\n\nThe canvas component allows you to control things like the size and pixel ratio of your canvas, and provides context to other components to inform them of its size, pixel ratio, etc.\n\nA `pixelRatio` of 2 and `width` of `100` will actually render a canvas that is `200` in width, but scale your drawings so you don't have to manually scale everything - allows for crisper drawings on high density/retina displays. You can use the `getRecommendedPixelRatio` util to use our recommendation (`2` for any devices with a `devicePixelRatio` greater than or equal to 2, and `1` for every other device).\n\nIf you set the `width` and or `height` to `\"auto\"` then the canvas' pixels will match the actual size of the canvas on the screen (scaled by pixel ratio). This way you can have your canvas automatically scale to fill its parent (using CSS) for example.\n\n```tsx\nimport { Canvas } from '@blinkorb/rcx';\n\nconst App = () => {\n  return (\n    <Canvas pixelRatio={getRecommendedPixelRatio()}>\n      {/* Your component here */}\n    </Canvas>\n  );\n};\n```\n\nYou can then render this component using the `render` function. The render function's second argument is the DOM node where you would like the canvas to appear. If the node is already a canvas RCX will render to that canvas, otherwise it will add a canvas within that node.\n\n```tsx\nimport { createRoot } from '@blinkorb/rcx';\n\nconst root = createRoot(document.body);\n\nif ('error' in root) {\n  console.error(root.error);\n} else {\n  root.render(<App />);\n}\n```\n\n### Basic Components\n\n#### Transform Components\n\nWe provide `Translate`, `Scale`, and `Rotate` components that will transform any of their children.\n\nIn the below example the `Offset` component will be offset by 10 pixels in both the `x` and `y` axis. The `NoOffset` component will not be affected by the transform.\n\n```tsx\n<>\n  <Translate x={10} y={10}>\n    <Offset />\n  </Translate>\n  <NoOffset />\n</>\n```\n\n#### Shape Components\n\nWe provide `Circle`, `Ellipse`, and `Rectangle` components for rendering some basic shapes. Each of these can receive a style prop to apply a stroke/border, and fill. You can also define (for some of these components) if the shape should continue from any existing drawings, or begin a new path by setting the `beginPath` prop. You can also choose to close these shapes by setting the `closePath` prop.\n\n```tsx\n<>\n  <Circle\n    x={50}\n    y={50}\n    radius={50}\n    beginPath\n    closePath\n    style={{\n      strokeWidth: 1,\n      stroke: 'black',\n    }}\n  />\n  <Ellipse\n    x={50}\n    y={50}\n    radiusX={20}\n    radiusY={50}\n    beginPath\n    closePath\n    style={{\n      strokeWidth: 1,\n      stroke: 'black',\n      fill: 'red',\n    }}\n  />\n  <Rectangle\n    x={0}\n    y={0}\n    width={100}\n    height={50}\n    beginPath\n    style={{ fill: 'blue' }}\n  />\n</>\n```\n\n#### Path Components\n\nWe provide a selection of components for drawing paths. These components can be combined to draw more complex shapes.\n\nAll path plotting components can have stroke styles. `Path` and `ArcTo` components can also have fill styles (fills are excluded from `Line` as it is more performant to use `Path`).\n\n```tsx\n<>\n  {/* Plot a single line */}\n  <Line\n    startX={0}\n    startY={0}\n    endX={10}\n    endY={10}\n    beginPath\n    style={{\n      strokeWidth: 2,\n      stroke: 'black',\n    }}\n  />\n  {/* Plot an arc */}\n  <ArcTo\n    startControlX={0}\n    startControlY={0}\n    endControlX={10}\n    endControlY={10}\n    radius={10}\n    style={{\n      strokeWidth: 2,\n      stroke: 'black',\n    }}\n  />\n  {/* Plot a path from an array of points */}\n  <Path\n    points={[\n      {\n        x: 0,\n        y: 0,\n      },\n      {\n        x: 10,\n        y: 10,\n      },\n    ]}\n    beginPath\n    style={{\n      strokeWidth: 2,\n      stroke: 'black',\n    }}\n  />\n  {/* Plot a path from an array of points using the Point component */}\n  <Path\n    beginPath\n    style={{\n      strokeWidth: 2,\n      stroke: 'black',\n    }}\n  >\n    {points.map((point, index) => (\n      <Point $key={index} x={point.x} x={point.y} lineTo={index > 0} />\n    ))}\n  </Path>\n  {/* Plot a path using manually specified Points */}\n  <Path\n    beginPath\n    style={{\n      strokeWidth: 2,\n      stroke: 'black',\n    }}\n  >\n    <Point x={0} x={0} lineTo={false} />\n    <Point x={10} x={10} lineTo={true} />\n  </Path>\n</>\n```\n\nIn addition to the path plotting components we provide, we also have a `Clip` component that can be used to apply a clipping mask to future drawings.\n\n```tsx\n<>\n  <Circle x={50} y={50} radius={50}>\n    <Clip>\n      <ComponentWillOnlyDrawInsideCircle />\n    </Clip>\n  </Circle>\n</>\n```\n\n#### Text Components\n\nWe currently only provide a single `Text` component that will render a single line of raw text. We hope to add multi-line and rich text components in the future. You can also render components that contain text or number within a `Text` component.\n\n```tsx\n<Text x={10} y={10} style={{\n  fill: 'black',\n  align: 'center,\n}}>\n  The count is {count}\n  <ContainsSomeText />\n</Text>\n```\n\n## Custom Components\n\nYou can define your own components with complex drawing logic directly applied via canvas context using the `useRenderBeforeChildren` and `useRenderAfterChildren` hooks.\n\nIt is highly recommended to `.save()` the canvas state before beginning drawing in `useRenderBeforeChildren` and to `.restore()` the canvas state after drawing in the `useRenderAfterChildren`.\n\nWe also provide some utils for resolving and applying styles as styles can be provided as an array, and all fills and strokes are always applied in the same way.\n\nHere's an example that draws a rectangle with rounded corners.\n\n```tsx\ninterface RoundedRectangleProps extends RectangleProps {\n  radius: number;\n  closePath?: boolean;\n}\n\nconst RoundedRectangle: RCXComponent<RoundedRectangleProps> = (props) => {\n  useRenderBeforeChildren((renderingContext) => {\n    const { x, y, width, height, radius, beginPath = true, closePath } = props;\n\n    renderingContext.ctx2d.save();\n\n    if (beginPath) {\n      renderingContext.ctx2d.beginPath();\n    }\n\n    renderingContext.ctx2d.moveTo(x + radius, y);\n    renderingContext.ctx2d.lineTo(x + width - radius, y);\n    renderingContext.ctx2d.arcTo(x + width, y, x + width, y + radius, radius);\n    renderingContext.ctx2d.lineTo(x + width, y + height - radius);\n    renderingContext.ctx2d.arcTo(\n      x + width,\n      y + height,\n      x + width - radius,\n      y + height,\n      radius\n    );\n    renderingContext.ctx2d.lineTo(x + radius, y + height);\n    renderingContext.ctx2d.arcTo(x, y + height, x, y + height - radius, radius);\n    renderingContext.ctx2d.lineTo(x, y + radius);\n    renderingContext.ctx2d.arcTo(x, y, x + radius, y, radius);\n\n    if (closePath) {\n      renderingContext.ctx2d.closePath();\n    }\n  });\n\n  useRenderAfterChildren((renderingContext) => {\n    applyFillAndStrokeStyles(renderingContext, resolveStyles(props.style));\n\n    renderingContext.ctx2d.restore();\n  });\n\n  return props.children;\n};\n```\n\n## Hooks\n\n### useCanvasContext\n\nProvides the context from the current canvas including its `pixelRatio`, `width` and `height` (scaled by `pixelRatio`), and actual width/height (e.g. with a `pixelRatio` of `2` and `width` of `100` the `actualWidth` of the canvas will be `200` - you should generally avoid using the actual sizes and rely on the scaled `width` and `height` values).\n\n### useRenderBeforeChildren\n\nUsed for creating custom components with complex rendering logic. Takes a callback that receives the current canvas rendering context to allow manually drawing with the canvas context. The callback is called before any children are rendered. See [Custom Components](#custom-components) for a full example.\n\n### useRenderAfterChildren\n\nUsed for creating custom components with complex rendering logic. Takes a callback that receives the current canvas rendering context to allow manually drawing with the canvas context. The callback is called after any children are rendered. See [Custom Components](#custom-components) for a full example.\n\n### useLinearGradient\n\nCan be used to create a linear gradient that can then be applied as a fill/stroke style.\n\n```tsx\nconst stroke = useLinearGradient({\n  startX: 0,\n  startY: 0,\n  endX: 10,\n  endY: 10,\n  stops: [\n    {\n      offset: 0,\n      color: '#f00',\n    },\n    {\n      offset: 1,\n      color: '#000',\n    },\n  ],\n});\n```\n\n### useRadialGradient\n\nCan be used to create a radial gradient that can then be applied as a fill/stroke style.\n\n```tsx\nconst fill = useRadialGradient({\n  startX: 10,\n  startY: 10,\n  startRadius: 0,\n  endX: 0,\n  endY: 0,\n  endRadius: 10,\n  stops: [\n    {\n      offset: 0,\n      color: '#000',\n    },\n    {\n      offset: 1,\n      color: '#00f',\n    },\n  ],\n});\n```\n\n### useLoop\n\nTakes a callback and calls this in an infinite `requestAnimationFrame` loop.\n\n```tsx\nuseLoop(() => {\n  // Your logic here\n});\n```\n\n### useOnMount\n\nTakes a callback that is executed when the component mounts. This callback can return another callback that is executed when a component unmounts e.g. to cleanup listeners.\n\n```tsx\nuseOnMount(() => {\n  // Logic on mount\n\n  return () => {\n    // Logic on unmount\n  };\n});\n```\n\n### useOnUnmount\n\nTakes a callback that is executed when the component is mounted.\n\n```tsx\nuseOnUnmount(() => {\n  // Logic on unmount\n});\n```\n\n### useReactive\n\nReceives an object that will be wrapped in a JavaScript proxy. Any mutations to this object will cause a re-render.\n\nNote: you must use either a `useReactive` or `useUnreactive` for any state values you want to persist. When a component re-renders any state that is defined as basic variables will be recreated.\n\n```tsx\nconst state = useReactive({ count: 0 });\n\n// This will reset to zero every render\nconst notState = { count: 0 };\n```\n\n### useUnreactive\n\nReceives an object that will be available until the component is unmounted. Unlike `useReactive` any mutations on this object will not cause a re-render.\n\nNote: you must use either a `useReactive` or `useUnreactive` for any state values you want to persist. When a component re-renders any state that is defined as basic variables will be recreated.\n\n```tsx\nconst state = useUnreactive({ count: 0 });\n\n// This will reset to zero every render\nconst notState = { count: 0 };\n```\n\n### useWindowSize\n\nReturns the current window size. This will update when the window is resized.\n\n## Integrating With React\n\nSee [`rcx-react`](../rcx-react/README.md) for documentation about integrating RCX into a React application.\n","readmeFilename":"README.md"}