{"_id":"@dynaruid/dom-to-canvas-react","name":"@dynaruid/dom-to-canvas-react","dist-tags":{"latest":"0.2.0"},"versions":{"0.2.0":{"name":"@dynaruid/dom-to-canvas-react","version":"0.2.0","description":"React bindings for dom-to-canvas","license":"MIT","author":{"name":"Dynaruid"},"repository":{"type":"git","url":"git+https://github.com/Dynaruid/dom-to-canvas.git","directory":"packages/dom-to-canvas-react"},"homepage":"https://github.com/Dynaruid/dom-to-canvas/tree/main/packages/dom-to-canvas-react","bugs":{"url":"https://github.com/Dynaruid/dom-to-canvas/issues"},"main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","type":"module","scripts":{"build":"tsc -p tsconfig.build.json","prepack":"npm run build","test":"bun test","typecheck":"tsc --noEmit"},"exports":{".":{"types":"./dist/index.d.ts","deno":"./index.ts","import":"./dist/index.js","default":"./dist/index.js"}},"publishConfig":{"access":"public"},"keywords":["dom","canvas","react","render"],"devDependencies":{"@types/bun":"latest","@types/react":"^19.2.2","@types/react-dom":"^19.2.2","@types/jsdom":"^28.0.1","jsdom":"^29.0.2","react":"^19.2.0","react-dom":"^19.2.0","typescript":"^5.9.3"},"dependencies":{"@dynaruid/dom-to-canvas":"^0.2.0"},"peerDependencies":{"react":">=18"},"_id":"@dynaruid/dom-to-canvas-react@0.2.0","gitHead":"c684f2ff9efb34d7b6147bb000767f495eda9a17","_nodeVersion":"22.14.0","_npmVersion":"11.4.2","dist":{"integrity":"sha512-+QabKRITeNH4gJH1LGd0zg0uhZQvdK5L2O5zUfIkSDROmOsXJp/aeaWRu9T6KKgr2qoyjsGNH+Ey/4cKo3h0Jg==","shasum":"e01307f09ea365b8b85f62934fd58a92246399e2","tarball":"https://registry.npmjs.org/@dynaruid/dom-to-canvas-react/-/dom-to-canvas-react-0.2.0.tgz","fileCount":13,"unpackedSize":43999,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDnVyW/7sCBWpgry02XbjbjzsXExNboauoVOAC//pbiZAIgcsGR/O8C3RMpwKNQ9PN/fYlTw/85BPOrCuzPHXCTQm0="}]},"_npmUser":{"name":"dynaruid","email":"dynaruid@gmail.com"},"directories":{},"maintainers":[{"name":"dynaruid","email":"dynaruid@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/dom-to-canvas-react_0.2.0_1777430889629_0.7628597262460008"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-29T02:48:09.557Z","0.2.0":"2026-04-29T02:48:09.809Z","modified":"2026-04-29T02:48:09.971Z"},"maintainers":[{"name":"dynaruid","email":"dynaruid@gmail.com"}],"description":"React bindings for dom-to-canvas","homepage":"https://github.com/Dynaruid/dom-to-canvas/tree/main/packages/dom-to-canvas-react","keywords":["dom","canvas","react","render"],"repository":{"type":"git","url":"git+https://github.com/Dynaruid/dom-to-canvas.git","directory":"packages/dom-to-canvas-react"},"author":{"name":"Dynaruid"},"bugs":{"url":"https://github.com/Dynaruid/dom-to-canvas/issues"},"license":"MIT","readme":"# dom-to-canvas-react\n\n[![JSR](https://jsr.io/badges/@dynaruid/dom-to-canvas-react)](https://jsr.io/@dynaruid/dom-to-canvas-react)\n[![JSR Score](https://jsr.io/badges/@dynaruid/dom-to-canvas-react/score)](https://jsr.io/@dynaruid/dom-to-canvas-react)\n[![JSR Weekly Downloads](https://jsr.io/badges/@dynaruid/dom-to-canvas-react/weekly-downloads)](https://jsr.io/@dynaruid/dom-to-canvas-react)\n\nReact bindings for `@dynaruid/dom-to-canvas`.\n\n## Install\n\n### Deno / JSR\n\n```bash\ndeno add jsr:@dynaruid/dom-to-canvas-react\n```\n\n### npm / Node / Bun\n\n```bash\nnpm install @dynaruid/dom-to-canvas-react\n```\n\n```bash\npnpm add @dynaruid/dom-to-canvas-react\n```\n\n```bash\nyarn add @dynaruid/dom-to-canvas-react\n```\n\n```bash\nbun add @dynaruid/dom-to-canvas-react\n```\n\n### Deno via npm\n\n```bash\ndeno add npm:@dynaruid/dom-to-canvas-react\n```\n\nThe npm package ships ESM output in `dist/` and installs `@dynaruid/dom-to-canvas` automatically. `react` remains a peer dependency and should already exist in the host app.\n\n## Quick Start\n\n### Frame callback workflow\n\n```tsx\nimport {\n  DomFrame,\n  useDomFrame\n} from \"@dynaruid/dom-to-canvas-react\";\n\nfunction CaptureProbe() {\n  useDomFrame((state) => {\n    if (state.frame === 1) {\n      void state.toPng().then((dataUrl) => {\n        console.log(dataUrl);\n      });\n    }\n  });\n\n  return <div>Hello canvas</div>;\n}\n\nexport function App() {\n  return (\n    <DomFrame>\n      <CaptureProbe />\n    </DomFrame>\n  );\n}\n```\n\n### Live handle workflow\n\n```tsx\nimport { useEffect, useRef } from \"react\";\nimport { useCanvasHandle } from \"@dynaruid/dom-to-canvas-react\";\n\nexport function LivePreview() {\n  const sourceRef = useRef<HTMLDivElement | null>(null);\n  const handle = useCanvasHandle(sourceRef, {\n    mode: \"continuous\",\n    scale: 2\n  });\n\n  useEffect(() => {\n    if (handle === null) {\n      return;\n    }\n\n    document.body.append(handle.canvas);\n    void handle.render();\n    handle.start();\n\n    return () => {\n      handle.stop();\n    };\n  }, [handle]);\n\n  return <div ref={sourceRef}>Hello canvas</div>;\n}\n```\n\n## Exports\n\n- `DomFrame`\n- `useCanvasHandle`\n- `useDomRenderer`\n- `useDomFrame`\n- `CanvasHandle` type re-export\n\n## Choosing an API\n\n- Use `DomFrame` when you want a React-owned frame clock and per-frame callback subscriptions.\n- Use `useCanvasHandle` when you want the core live `getCanvas` handle from an element ref.\n- For CSS animations or transitions that need to be reflected in the canvas continuously, pass `mode: \"continuous\"`.\n\n## Development\n\n```bash\nbun test\nbun run typecheck\n```\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_rev":"1-b302666afd4d1df61dfadd7776152fd9"}