@vaed-ai/over

React overlay for spatial visualizers — render React components at positions in any coordinate system.

Live examples & docs →

Install

npm install @vaed-ai/over

Usage

import { Over, Node, useOver } from '@vaed-ai/over'

function App() {
  return (
    <div style={{ position: 'relative', height: 400 }}>
      <Over>
        <MyVisualizer />
        <Node id="a"><div>React content</div></Node>
        <Node id="b"><div>Another node</div></Node>
      </Over>
    </div>
  )
}

Wrap <Over> in a container with position: relative and a defined height. The component fills its parent absolutely.

How it works

Over renders an invisible overlay div that transforms with your visualizer's pan and zoom. <Node> components portal their React children into this overlay at specific positions. useOver() provides imperative methods to control the viewport and node positions.

const over = useOver()

// Update overlay transform when your visualizer pans/zooms:
over.setTransform({ x: panX, y: panY }, zoom)

// Position a node:
over.setNodePosition('a', { x: 100, y: 200 })

Components

| Export | Description | |--------|-------------| | <Over> | Container. Renders overlay div + activation tracking | | <Node> | Portals React children into the overlay. onResize reports size changes | | useOver() | Hook to access setTransform, setNodePosition, overlayRef, nodeElements | | OverContext | React context (for advanced use) |

Integration examples

Over works with any spatial visualizer. Connect by calling setTransform on viewport change and setNodePosition on node move.

Cytoscape.js → @vaed-ai/cyto — full graph visualization built on Over.

License

UNLICENSED — All rights reserved.