{"_id":"@adam26davidson/char-matrix-react-renderer","_rev":"4-dba730391c9660c0906763c545a0fac3","name":"@adam26davidson/char-matrix-react-renderer","dist-tags":{"latest":"1.0.0"},"versions":{"0.0.2":{"name":"@adam26davidson/char-matrix-react-renderer","version":"0.0.2","_id":"@adam26davidson/char-matrix-react-renderer@0.0.2","maintainers":[{"name":"adam26davidson","email":"adam26davidson@gmail.com"}],"dist":{"shasum":"6fb56fa89cd0734a711d8df98d291a73c596d302","tarball":"https://registry.npmjs.org/@adam26davidson/char-matrix-react-renderer/-/char-matrix-react-renderer-0.0.2.tgz","fileCount":22,"integrity":"sha512-Zr1w5TEPGYRLNYIozVpo6hFZ1UpCe9lutWJsuKQKDx95c6F1ItTSP5TOyktQ8VLuBv2rjA8y9X7vKDSQeKh45A==","signatures":[{"sig":"MEYCIQCz1T7VGi88/UqY6OE+MZbrGQBpUSSUvPK9EuYCXRX/SAIhAOkCO6C8M3qFSY9WxYt25r7OEW/JiBOl2fnSnw1Pk0xb","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":32102},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"1c6939c020b26724237ab7537f47f6fa89d413d2","scripts":{"test":"vitest run","build":"rm -rf dist && tsc","clean":"rm -rf dist","test:watch":"vitest"},"_npmUser":{"name":"adam26davidson","email":"adam26davidson@gmail.com"},"_npmVersion":"10.9.7","description":"Declarative React JSX renderer for [`@adam26davidson/char-matrix`](https://www.npmjs.com/package/@adam26davidson/char-matrix) element trees. Built on `react-reconciler`, this package lets you compose char-matrix UIs with JSX, React state, hooks, and compo","directories":{},"_nodeVersion":"22.22.2","dependencies":{"react-reconciler":"^0.29.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vitest":"^3.0.2","typescript":"^5.2.2","@types/react":"^18.3.3","@types/react-reconciler":"^0.33.0"},"peerDependencies":{"react":"^18.0.0","@adam26davidson/char-matrix":"*"},"_npmOperationalInternal":{"tmp":"tmp/char-matrix-react-renderer_0.0.2_1775320347777_0.7627520966294494","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@adam26davidson/char-matrix-react-renderer","version":"0.0.3","_id":"@adam26davidson/char-matrix-react-renderer@0.0.3","maintainers":[{"name":"adam26davidson","email":"adam26davidson@gmail.com"}],"dist":{"shasum":"e8a60f6ea014bb4a1f02e1d540ff53ccb911a343","tarball":"https://registry.npmjs.org/@adam26davidson/char-matrix-react-renderer/-/char-matrix-react-renderer-0.0.3.tgz","fileCount":26,"integrity":"sha512-V/dF0a9Ucyv/pNOmAvmc4MlYlbQ4/ck2ADXJp8+qoUun3BQiE3ge4EM+G73W+gkUxDwdXVAY5SvGLFGcA0UBBw==","signatures":[{"sig":"MEUCIAGj2O9nlHaILDlPOArLpfQe7j+ARWes0NZkwMzNOBr9AiEA1pvFYAYYFqsSI9PXhm7kP8nIHH1bPQY5ExV3mJuaImQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":50054},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"7dd34bdaa918ff5eeec2b62f6e47ba82f6e95305","scripts":{"test":"vitest run","build":"rm -rf dist && tsc","clean":"rm -rf dist","test:watch":"vitest"},"_npmUser":{"name":"adam26davidson","email":"adam26davidson@gmail.com"},"_npmVersion":"10.9.7","description":"Declarative React JSX renderer for [`@adam26davidson/char-matrix`](https://www.npmjs.com/package/@adam26davidson/char-matrix) element trees. Built on `react-reconciler`, this package lets you compose char-matrix UIs with JSX, React state, hooks, and compo","directories":{},"_nodeVersion":"22.22.2","dependencies":{"react-reconciler":"^0.29.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vitest":"^3.0.2","typescript":"^5.2.2","@types/react":"^18.3.3","@types/react-reconciler":"^0.33.0"},"peerDependencies":{"react":"^18.0.0","@adam26davidson/char-matrix":"*"},"_npmOperationalInternal":{"tmp":"tmp/char-matrix-react-renderer_0.0.3_1775413299446_0.8099470105099817","host":"s3://npm-registry-packages-npm-production"}},"0.0.4":{"name":"@adam26davidson/char-matrix-react-renderer","version":"0.0.4","_id":"@adam26davidson/char-matrix-react-renderer@0.0.4","maintainers":[{"name":"adam26davidson","email":"adam26davidson@gmail.com"}],"dist":{"shasum":"f514a1ee0ad31ff29151170465d5e75b8ce08ea9","tarball":"https://registry.npmjs.org/@adam26davidson/char-matrix-react-renderer/-/char-matrix-react-renderer-0.0.4.tgz","fileCount":26,"integrity":"sha512-v+cmlC5uxF+hvxv/nMGVZGUkLsumPv/yr4s9b+zHVdepYHxv2jsBbeDPI5DcBE3ke2Abi8cSpe098t7kuWQ0Aw==","signatures":[{"sig":"MEUCIDmhn5jSI1Ke529h3EfUdgj5NRGCh/KiVt0niGcVeFJ4AiEA1RX7IA8GW/hVHKRqLZQkbfFFP8MVL/L5x8o0DKHc1Ks=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":57404},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"941cd8d367042c1c2c0044438210d380ba8b26b9","scripts":{"test":"vitest run","build":"rm -rf dist && tsc","clean":"rm -rf dist","test:watch":"vitest"},"_npmUser":{"name":"adam26davidson","email":"adam26davidson@gmail.com"},"_npmVersion":"10.9.7","description":"Declarative React JSX renderer for [`@adam26davidson/char-matrix`](https://www.npmjs.com/package/@adam26davidson/char-matrix) element trees. Built on `react-reconciler`, this package lets you compose char-matrix UIs with JSX, React state, hooks, and compo","directories":{},"_nodeVersion":"22.22.2","dependencies":{"react-reconciler":"^0.29.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vitest":"^3.0.2","typescript":"^5.2.2","@types/react":"^18.3.3","@types/react-reconciler":"^0.33.0"},"peerDependencies":{"react":"^18.0.0","@adam26davidson/char-matrix":"*"},"_npmOperationalInternal":{"tmp":"tmp/char-matrix-react-renderer_0.0.4_1775503802036_0.15983488439076","host":"s3://npm-registry-packages-npm-production"}},"1.0.0":{"name":"@adam26davidson/char-matrix-react-renderer","version":"1.0.0","type":"module","main":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"publishConfig":{"access":"public"},"scripts":{"build":"rm -rf dist && tsc","clean":"rm -rf dist","test":"vitest run","test:watch":"vitest"},"dependencies":{"react-reconciler":"^0.29.0"},"peerDependencies":{"@adam26davidson/char-matrix":"*","react":"^18.0.0"},"devDependencies":{"@types/react":"^18.3.3","@types/react-reconciler":"^0.33.0","typescript":"^5.2.2","vitest":"^3.0.2"},"_id":"@adam26davidson/char-matrix-react-renderer@1.0.0","gitHead":"483a627b55a2cb30dd5030a3e0b84653e9d149f2","description":"Declarative React JSX renderer for [`@adam26davidson/char-matrix`](https://www.npmjs.com/package/@adam26davidson/char-matrix) element trees. Built on `react-reconciler`, this package lets you compose char-matrix UIs with JSX, React state, hooks, and compo","_nodeVersion":"22.22.2","_npmVersion":"10.9.7","dist":{"integrity":"sha512-Bwrpmrq7nbNBi+JpYIXu1MJpoHfEi+2fap7pnk1LQ3BbG5GVMAnUPNKmf9epbG6rSHfyP1eqcIRO7NNKaGoF+Q==","shasum":"1aa40509aacce953e2ce85a851a31039d6182524","tarball":"https://registry.npmjs.org/@adam26davidson/char-matrix-react-renderer/-/char-matrix-react-renderer-1.0.0.tgz","fileCount":26,"unpackedSize":57404,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCl3a6i6S8YBD9YYnC8HH1a+S+cFxM5DCLb+KLWurw2RwIgaHBYO+8VqhlPqQkjMkdEQcARD9jY76gsXecm6Q3nOQ8="}]},"_npmUser":{"name":"adam26davidson","email":"adam26davidson@gmail.com"},"directories":{},"maintainers":[{"name":"adam26davidson","email":"adam26davidson@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/char-matrix-react-renderer_1.0.0_1776010605891_0.7200219959148859"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-04T16:32:27.675Z","modified":"2026-04-12T16:16:46.154Z","0.0.2":"2026-04-04T16:32:28.006Z","0.0.3":"2026-04-05T18:21:39.590Z","0.0.4":"2026-04-06T19:30:02.218Z","1.0.0":"2026-04-12T16:16:46.034Z"},"description":"Declarative React JSX renderer for [`@adam26davidson/char-matrix`](https://www.npmjs.com/package/@adam26davidson/char-matrix) element trees. Built on `react-reconciler`, this package lets you compose char-matrix UIs with JSX, React state, hooks, and compo","maintainers":[{"name":"adam26davidson","email":"adam26davidson@gmail.com"}],"readme":"# @adam26davidson/char-matrix-react-renderer\n\nDeclarative React JSX renderer for [`@adam26davidson/char-matrix`](https://www.npmjs.com/package/@adam26davidson/char-matrix) element trees. Built on `react-reconciler`, this package lets you compose char-matrix UIs with JSX, React state, hooks, and component composition.\n\n## Features\n\n- **Custom React reconciler** — Maps React operations to char-matrix element creation, child management, and prop updates\n- **JSX intrinsic elements** — `<cm-container>`, `<cm-text>`, `<cm-table>` with full TypeScript support\n- **In-place updates** — Text content updates without element recreation; children managed via a WeakMap bridge between React's incremental mutations and char-matrix's bulk `setChildren()` API\n- **onClick support** — Click handlers wired through the reconciler\n- **Animation handler wiring** — `DefaultAnimationHandler.setElement()` called automatically after element creation\n- **setRoot bridging** — Reconciler calls `view.setRoot()` when the root element is committed, integrating with the render loop\n\n## Install\n\n```bash\nnpm install @adam26davidson/char-matrix-react-renderer @adam26davidson/char-matrix react\n```\n\n## Usage\n\n```tsx\nimport { render, unmount } from \"@adam26davidson/char-matrix-react-renderer\";\n\nfunction Dashboard() {\n  const [time, setTime] = useState(new Date());\n\n  return (\n    <cm-container elementKey=\"root\" mainAxis=\"y\" widthType=\"relative\" width={1} spacing={1}>\n      <cm-text elementKey=\"clock\" text={formatTime(time)} />\n      <cm-container elementKey=\"row\" mainAxis=\"x\" spacing={2}>\n        <cm-text elementKey=\"label\" text=\"Hello, world!\" bordered paddingX={1} />\n      </cm-container>\n    </cm-container>\n  );\n}\n\n// Render into a RenderTarget (e.g. MatrixView)\nrender(<Dashboard />, view);\n\n// Later, to tear down\nunmount(view);\n```\n\nNote: use `elementKey` instead of `key` for the char-matrix element key, since React reserves `key` for reconciliation.\n\n## Peer dependencies\n\n- `@adam26davidson/char-matrix`\n- `react` ^18.0.0\n\n## Related packages\n\n- [`@adam26davidson/char-matrix`](https://www.npmjs.com/package/@adam26davidson/char-matrix) — Core layout and rendering engine\n- [`@adam26davidson/char-matrix-fx`](https://www.npmjs.com/package/@adam26davidson/char-matrix-fx) — Animations, physics, and surface transforms\n- [`@adam26davidson/char-matrix-react`](https://www.npmjs.com/package/@adam26davidson/char-matrix-react) — Embed React components inside a character matrix layout\n","readmeFilename":"README.md"}