{"library":"react-konva-utils","title":"React Konva Utilities","description":"react-konva-utils is a supplementary library providing useful components and hooks for `react-konva` applications. As of its current stable version 2.0.0, it offers key functionalities such as the `Html` component for seamlessly embedding standard DOM elements within a Konva stage and the `Portal` component for relocating Konva nodes within the stage's rendering hierarchy. This package is designed to simplify complex UI scenarios that require blending canvas-rendered graphics with interactive HTML elements. It maintains compatibility with recent major versions of its peer dependencies, including `react` (v18/v19), `react-dom` (v18/v19), `konva` (v8/v9/v10), and `react-konva` (v18/v19), aligning its release cadence with these core libraries. Its primary differentiation lies in abstracting away the manual DOM manipulation and complex node management often required to achieve advanced canvas-DOM integrations.","language":"javascript","status":"active","last_verified":"Sat Apr 25","install":{"commands":["npm install react-konva-utils"],"cli":null},"imports":["import { Html } from 'react-konva-utils';","import { Portal } from 'react-konva-utils';","import type { HtmlProps } from 'react-konva-utils';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { Stage, Layer, Rect } from 'react-konva';\nimport { Html } from 'react-konva-utils';\n\nconst App = () => {\n  const stageWidth = window.innerWidth;\n  const stageHeight = window.innerHeight;\n\n  return (\n    <Stage width={stageWidth} height={stageHeight}>\n      <Layer>\n        <Rect x={50} y={50} width={100} height={100} fill=\"blue\" />\n        <Html\n          transform\n          groupProps={{ x: 120, y: 120 }}\n          divProps={{\n            style: {\n              background: 'white',\n              padding: '10px',\n              border: '2px solid #ccc',\n              borderRadius: '5px',\n              boxShadow: '0px 2px 5px rgba(0,0,0,0.2)'\n            }\n          }}\n        >\n          <div>\n            <h3 style={{ margin: '0 0 8px 0', color: '#333' }}>Konva HTML Overlay</h3>\n            <p style={{ margin: '0', fontSize: '14px', color: '#555' }}>\n              This is a standard DOM element rendered over the canvas.\n            </p>\n            <button\n              onClick={() => alert('Button in HTML clicked!')}\n              style={{ marginTop: '10px', padding: '8px 12px', cursor: 'pointer' }}\n            >\n              Click Me!\n            </button>\n          </div>\n        </Html>\n        <Rect x={300} y={250} width={150} height={80} fill=\"green\" />\n      </Layer>\n    </Stage>\n  );\n};\n\nexport default App;\n","lang":"typescript","description":"This quickstart demonstrates how to embed and position standard HTML content directly onto a Konva canvas using the `Html` component. It showcases interactive DOM elements within a canvas scene, allowing for rich UI overlays.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}