@nsgx/react

React components for embedding NSG (Nested Spatial Graph) visualizations in your application.

Install

pnpm add @nsgx/react @nsgx/api @nsgx/schema
# or
npm install @nsgx/react @nsgx/api @nsgx/schema

Quick Start

// app/graph/page.tsx (Server Component)
import { NSGClient } from "@nsgx/api"
import { GraphView } from "./GraphView"

export default async function Page() {
  const client = new NSGClient({ apiKey: process.env.NSG_API_KEY! })
  const graph = await client.getGraph("my-graph-id")
  const { license } = await client.issueLicense()

  return <GraphView graph={graph} licenseKey={license} />
}

// app/graph/GraphView.tsx (Client Component)
"use client"
import { NSGCanvas } from "@nsgx/react"
import type { NSGFile } from "@nsgx/schema"

export function GraphView({ graph, licenseKey }: { graph: NSGFile; licenseKey: string }) {
  return (
    <NSGCanvas
      graph={graph}
      licenseKey={licenseKey}
      enableInspector
      enableMiniMap
    />
  )
}

Environment Variables

Add to your .env.local:

NSG_API_KEY=nsg_your_key_here

Get your API key at nsgx.io/settings/api-keys.

Components

• <NSGCanvas /> — Main 3D graph viewport
• <NSGLayerPanel /> — Layer navigation tree
• <NSGElementInspector /> — Node/edge property inspector
• <NSGDiffLegend /> — Visualization for diff mode

Hooks

• useNSGGraph() — Access the current graph
• useNSGNavigation() — Layer navigation state
• useNSGSelection() — Selection state
• useNSGStatus() — Runtime status

License

MIT