@jfat/share-graph

A focused React canvas graph component for exploring connected notes, ideas, and resources.

Install

npm install @jfat/share-graph

React is a peer dependency. The package supports React 18 and React 19.

Usage

import ShareGraph, { createGraph } from "@jfat/share-graph";
import "@jfat/share-graph/styles.css";

const graph = createGraph({
  nodes: [
    {
      id: "knowledge",
      label: "Knowledge",
      preview: "A root node",
      isRoot: true,
    },
    {
      id: "writing",
      label: "Writing",
      parentId: "knowledge",
      preview: "Essays, notes, and drafts",
    },
    {
      id: "systems",
      label: "Systems",
      parentId: "knowledge",
      preview: "Architecture and infrastructure",
      linksTo: ["writing"],
    },
  ],
});

export function Example() {
  return (
    <ShareGraph
      graph={graph}
      title="Knowledge Map"
      subtitle="A focused graph view with pan, zoom, search, and a detail panel."
    />
  );
}

Data Model

type ShareGraphNode = {
  id: string;
  label?: string;
  parentId?: string | null;
  preview?: string;
  content?: string;
  type?: string;
  href?: string | null;
  metadata?: Record<string, unknown>;
  linksTo?: string[];
  isRoot?: boolean;
};

type ShareGraphLink = {
  source: string;
  target: string;
  isParentLink?: boolean;
};

createGraph normalises node IDs, derives parent links from parentId, derives related links from linksTo, and removes duplicate node IDs.

Component Props

| Prop | Type | Default | | --- | --- | --- | | graph | ShareGraphData | required | | initialNodeId | string | root node | | defaultViewMode | "focused" \| "all" | "focused" | | theme | "light" \| "dark" \| "auto" | "light" | | height | number | 720 | | showDetailsPanel | boolean | true | | renderSidebar | (context) => React.ReactNode | default sidebar | | renderNodeBody | (node) => React.ReactNode | preview/content | | onNodeSelect | (node) => void | none |

Build

npm run build

The published package exposes:

• @jfat/share-graph
• @jfat/share-graph/styles.css