{"_id":"@adam26davidson/char-matrix-react","_rev":"4-8798742a8be55e358ed625bc5157058c","name":"@adam26davidson/char-matrix-react","dist-tags":{"latest":"1.0.0"},"versions":{"0.0.1":{"name":"@adam26davidson/char-matrix-react","version":"0.0.1","_id":"@adam26davidson/char-matrix-react@0.0.1","maintainers":[{"name":"adam26davidson","email":"adam26davidson@gmail.com"}],"dist":{"shasum":"dbe15b98e3040e0464880755ae0cc4badc890a08","tarball":"https://registry.npmjs.org/@adam26davidson/char-matrix-react/-/char-matrix-react-0.0.1.tgz","fileCount":105,"integrity":"sha512-35/EtNDKvuWgKEUphWBQdW8ce05vY8I5fHurzXid93/RxjBp7oS0F4GH321NTdhSa0JY31gs4oxgjt53RCa8GA==","signatures":[{"sig":"MEYCIQDh+Hw7usrFHdJQGs3qtOkGFPdWOBiz0VBY1Srfqzj5WwIhAKWllytZxpQgl6Fh9EqlANkB6RR/n/cZCN4i7BF/H/nk","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":167682},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"922a51e01522f71506e65ff0e81bf9a60d164dee","scripts":{"build":"rm -rf dist && tsc","clean":"rm -rf dist"},"_npmUser":{"name":"adam26davidson","email":"adam26davidson@gmail.com"},"_npmVersion":"10.9.2","directories":{},"_nodeVersion":"22.13.1","dependencies":{"lodash":"^4.17.21"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.2.2","@types/react":"^18.3.3","@types/lodash":"^4.17.13","@types/react-dom":"^18.3.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","@adam26davidson/char-matrix":"*"},"_npmOperationalInternal":{"tmp":"tmp/char-matrix-react_0.0.1_1774900784154_0.7082655517385106","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@adam26davidson/char-matrix-react","version":"0.0.2","_id":"@adam26davidson/char-matrix-react@0.0.2","maintainers":[{"name":"adam26davidson","email":"adam26davidson@gmail.com"}],"dist":{"shasum":"91dfd45bfbd8314b0c06f17321dee0715942ba43","tarball":"https://registry.npmjs.org/@adam26davidson/char-matrix-react/-/char-matrix-react-0.0.2.tgz","fileCount":105,"integrity":"sha512-HFF4M/nECdStoktuCSjXBzvph5BEMta+PHNzj0YUvf8EJsWiZpUTq6Pm4OxZAooiQUE6KIxEhxmAyFUWXW0h+w==","signatures":[{"sig":"MEQCICifSihwTy94yxALkgyA1zyNGvsonA/jfwrl0KY08w3FAiB/Du6hiA+52yrkc9Wu0de34KMn8lzjeLE8CfCgGmS9dQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":167686},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"0533befdd5dc0ca4aa893917af58c4c8d1e29e29","scripts":{"build":"rm -rf dist && tsc","clean":"rm -rf dist"},"_npmUser":{"name":"adam26davidson","email":"adam26davidson@gmail.com"},"_npmVersion":"10.9.4","directories":{},"_nodeVersion":"22.22.1","dependencies":{"lodash":"^4.17.21"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.2.2","@types/react":"^18.3.3","@types/lodash":"^4.17.13","@types/react-dom":"^18.3.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","@adam26davidson/char-matrix":"*"},"_npmOperationalInternal":{"tmp":"tmp/char-matrix-react_0.0.2_1774985808979_0.5238696827800116","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@adam26davidson/char-matrix-react","version":"0.0.3","_id":"@adam26davidson/char-matrix-react@0.0.3","maintainers":[{"name":"adam26davidson","email":"adam26davidson@gmail.com"}],"dist":{"shasum":"5555f8ca0ccc2b6966b0d476706224c322e126cb","tarball":"https://registry.npmjs.org/@adam26davidson/char-matrix-react/-/char-matrix-react-0.0.3.tgz","fileCount":146,"integrity":"sha512-EPIA1aHpQqN4OTjUm60wzh/IAvOGBSuMOAazfP16tn/JIfBCJdkUguwj7/DvxKOzOs7o+gn05AYnG3lfO7BEAw==","signatures":[{"sig":"MEYCIQD04brGM3lkWjHWXcp0Pw2P+M8QphUs/dwbO9/1/hoodAIhAPSO0XOvFpcXMJlfN/155c+IIBrSqODAhOp123dVkply","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":15904805},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"ec9720a0be1c849faa4e6aa8ed76b7a345e2db7d","scripts":{"build":"rm -rf dist && tsc","clean":"rm -rf dist"},"_npmUser":{"name":"adam26davidson","email":"adam26davidson@gmail.com"},"_npmVersion":"10.9.7","description":"React integration for [`@adam26davidson/char-matrix`](https://www.npmjs.com/package/@adam26davidson/char-matrix). Embed React components inside a character matrix layout.","directories":{},"_nodeVersion":"22.22.2","dependencies":{"lodash":"^4.17.21"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.2.2","@types/react":"^18.3.3","@types/lodash":"^4.17.13","@types/react-dom":"^18.3.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","@adam26davidson/char-matrix":"*"},"_npmOperationalInternal":{"tmp":"tmp/char-matrix-react_0.0.3_1775291678722_0.7025340833003113","host":"s3://npm-registry-packages-npm-production"}},"1.0.0":{"name":"@adam26davidson/char-matrix-react","version":"1.0.0","type":"module","main":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/index.js","types":"./dist/index.d.ts"}},"publishConfig":{"access":"public"},"scripts":{"build":"rm -rf dist && tsc","clean":"rm -rf dist"},"dependencies":{"lodash":"^4.17.21"},"peerDependencies":{"@adam26davidson/char-matrix":"*","react":"^18.0.0","react-dom":"^18.0.0"},"devDependencies":{"@types/lodash":"^4.17.13","@types/react":"^18.3.3","@types/react-dom":"^18.3.0","typescript":"^5.2.2"},"_id":"@adam26davidson/char-matrix-react@1.0.0","gitHead":"483a627b55a2cb30dd5030a3e0b84653e9d149f2","description":"React integration for [`@adam26davidson/char-matrix`](https://www.npmjs.com/package/@adam26davidson/char-matrix). Embed React components inside a character matrix layout.","_nodeVersion":"22.22.2","_npmVersion":"10.9.7","dist":{"integrity":"sha512-H/I6C86t64NHKba6Q9mj+KsMZLPEs2K9C0pw4x0C2dPyxerfdHoiAYiJxS7palalJHZkD16kahdboh2ccTFTNA==","shasum":"dcdc27bda046e4d5b117c1d9e52b7e6e299ee589","tarball":"https://registry.npmjs.org/@adam26davidson/char-matrix-react/-/char-matrix-react-1.0.0.tgz","fileCount":162,"unpackedSize":15941156,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIBfppW4e49pjK30gE4yLzPQN3ZXthcV4G5sf/li54AD/AiARlZbdHxAxPKI5hoPW5F/R0C0oUk44GW1LUAxnohYILQ=="}]},"_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_1.0.0_1776010607920_0.7198974061573693"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-30T19:59:43.977Z","modified":"2026-04-12T16:16:48.353Z","0.0.1":"2026-03-30T19:59:44.325Z","0.0.2":"2026-03-31T19:36:49.149Z","0.0.3":"2026-04-04T08:34:39.038Z","1.0.0":"2026-04-12T16:16:48.248Z"},"description":"React integration for [`@adam26davidson/char-matrix`](https://www.npmjs.com/package/@adam26davidson/char-matrix). Embed React components inside a character matrix layout.","maintainers":[{"name":"adam26davidson","email":"adam26davidson@gmail.com"}],"readme":"# @adam26davidson/char-matrix-react\n\nReact integration for [`@adam26davidson/char-matrix`](https://www.npmjs.com/package/@adam26davidson/char-matrix). Embed React components inside a character matrix layout.\n\n## Features\n\n- **ReactComponentElement** — A char-matrix element that reserves space in the character grid and renders a React component as a positioned overlay\n- **ReactRenderTarget** — Extended render target interface for managing React node positioning and lifecycle\n\n## Install\n\n```bash\nnpm install @adam26davidson/char-matrix-react @adam26davidson/char-matrix react react-dom\n```\n\n## Usage\n\n```ts\nimport { ReactComponentElement } from \"@adam26davidson/char-matrix-react\";\n\nconst element = new ReactComponentElement({\n  key: \"blog-post\",\n  view: myRenderTarget,\n  component: MyReactComponent,\n  widthType: \"expand\",\n  heightType: \"expand\",\n});\n```\n\nThe element reports its position and size to the render target, which renders the React component as an absolutely-positioned overlay on top of the character grid.\n\n## Peer dependencies\n\n- `@adam26davidson/char-matrix`\n- `react` ^18.0.0\n- `react-dom` ^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-renderer`](https://www.npmjs.com/package/@adam26davidson/char-matrix-react-renderer) — Declarative React JSX renderer for char-matrix element trees\n","readmeFilename":"README.md"}