{"_id":"@ananse/react","name":"@ananse/react","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@ananse/react","version":"0.1.0","description":"React OrgChart viewer and editor for Ananse — densities, search, reparent, inspector.","license":"MIT","repository":{"type":"git","url":"git+https://github.com/pkdadson/ananse.git","directory":"packages/react"},"homepage":"https://github.com/pkdadson/ananse#readme","bugs":{"url":"https://github.com/pkdadson/ananse/issues"},"type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","sideEffects":["**/*.css","./dist/index.js","./dist/index.cjs"],"keywords":["org-chart","react","react-flow","xyflow","hr","hierarchy"],"peerDependencies":{"react":">=18.2.0","react-dom":">=18.2.0"},"dependencies":{"@xyflow/react":"^12.3.0","@ananse/core":"0.1.0","@ananse/tokens":"0.1.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"publishConfig":{"access":"public"},"devDependencies":{"@testing-library/react":"^16.0.1","@testing-library/jest-dom":"^6.5.0","@testing-library/user-event":"^14.5.2","@types/react":"^19.0.0","@types/react-dom":"^19.0.0","jsdom":"^25.0.0","react":"^19.0.0","react-dom":"^19.0.0","tsup":"^8.3.0","vitest":"^2.1.0"},"scripts":{"build":"tsup","test":"vitest run","test:watch":"vitest"},"_id":"@ananse/react@0.1.0","_integrity":"sha512-bMX6vc4C9MU6wCKE1kXxGz/GpGmcwRJRZHwg9jPlOiyq0nh4J5sbwsZEdNwanoJFoCw+7EZWkq2DvfhIUd7wvg==","_resolved":"/private/var/folders/_3/ykl5dwwd19s2y_f7f51j5tr80000gn/T/7cf8cfa70a64eaa616fc083af600a7ca/ananse-react-0.1.0.tgz","_from":"file:ananse-react-0.1.0.tgz","_nodeVersion":"22.17.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-bMX6vc4C9MU6wCKE1kXxGz/GpGmcwRJRZHwg9jPlOiyq0nh4J5sbwsZEdNwanoJFoCw+7EZWkq2DvfhIUd7wvg==","shasum":"4812430c2349c8ee58b4e5252dd63f2097493f2b","tarball":"https://registry.npmjs.org/@ananse/react/-/react-0.1.0.tgz","fileCount":9,"unpackedSize":688941,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDnEct3YIXjACX0Rd6UB5DQsXdSi2ITdaBvrnq+/1isnQIgDUuc/f1qh0OnDztaMhqStseJiEcucK5wcZ8rbu5EBQE="}]},"_npmUser":{"name":"pkdadson","email":"pddadson@gmail.com"},"directories":{},"maintainers":[{"name":"pkdadson","email":"pddadson@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react_0.1.0_1785442063997_0.7870460909555745"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-30T20:07:43.787Z","0.1.0":"2026-07-30T20:07:44.219Z","modified":"2026-07-30T20:07:44.505Z"},"maintainers":[{"name":"pkdadson","email":"pddadson@gmail.com"}],"description":"React OrgChart viewer and editor for Ananse — densities, search, reparent, inspector.","homepage":"https://github.com/pkdadson/ananse#readme","keywords":["org-chart","react","react-flow","xyflow","hr","hierarchy"],"repository":{"type":"git","url":"git+https://github.com/pkdadson/ananse.git","directory":"packages/react"},"bugs":{"url":"https://github.com/pkdadson/ananse/issues"},"license":"MIT","readme":"# @ananse/react\n\n[![npm](https://img.shields.io/npm/v/@ananse/react.svg)](https://www.npmjs.com/package/@ananse/react)\n[![downloads](https://img.shields.io/npm/dm/@ananse/react.svg)](https://www.npmjs.com/package/@ananse/react)\n[![bundle size](https://img.shields.io/bundlephobia/minzip/@ananse/react)](https://bundlephobia.com/package/@ananse/react)\n[![license](https://img.shields.io/npm/l/@ananse/react.svg)](https://github.com/pkdadson/ananse/blob/main/LICENSE)\n\n**The design-forward React library for org charts, mind maps, and flow builders.**\n\n- `<OrgChart>` — hierarchical org chart with search, focus, densities, and a built-in editor\n- `<MindMap>` — radial mind map\n- `<FlowBuilder>` — process DAG with legend + export\n- MIT · React 18.2+ or 19 · SSR-friendly\n\n## Install\n\n```bash\npnpm add @ananse/react @ananse/core @ananse/tokens\n# peers: react, react-dom (>=18.2)\n```\n\nTokens auto-inject — no CSS import required.\n\n## Quickstart\n\n```tsx\nimport { OrgChart } from \"@ananse/react\";\n\nconst people = [\n  { id: \"ceo\", name: \"Ada Lovelace\", title: \"CEO\", managerId: null },\n  { id: \"cto\", name: \"Grace Hopper\", title: \"CTO\", managerId: \"ceo\" },\n];\n\nexport default function App() {\n  return <OrgChart defaultData={people} height=\"100vh\" showSearch />;\n}\n```\n\n## Edit mode (no glue)\n\n```tsx\nimport { useState } from \"react\";\nimport { OrgChart } from \"@ananse/react\";\n\nexport function Editable({ initial }) {\n  const [people, setPeople] = useState(initial);\n  return (\n    <OrgChart\n      data={people}\n      mode=\"edit\"\n      onChange={setPeople}\n      height=\"100vh\"\n      showSearch\n    />\n  );\n}\n```\n\nUndo/redo, drag-to-reparent, inspector, multi-select, vacant roles, and JSON export are built in. No `editor={{ onReparent, onUndo, … }}` wiring required.\n\n| Pattern | API |\n|---------|-----|\n| Uncontrolled | `defaultData` + optional `onChange` |\n| Controlled | `data` + `onChange` |\n| Persist prototype | `persistKey=\"org-v1\"` |\n| Advanced | `useOrgChartEditor` + `editor` prop |\n\n## Beyond people\n\n`OrgChart` is a generic tree — accounts, products, geo, categories, anything hierarchical.\n\n```tsx\n<OrgChart defaultData={accounts} domain=\"hierarchy\" height=\"100vh\" showSearch />\n```\n\n## Mind map & flow\n\n```tsx\nimport { MindMap, FlowBuilder } from \"@ananse/react\";\n\n<MindMap data={mindNodes} height=\"100vh\" showExport />\n<FlowBuilder nodes={steps} links={edges} height=\"100vh\" showLegend showExport />\n```\n\n## Customize\n\n```tsx\n// Hide fields\n<OrgChart data={people} fields={{ email: false, badges: false }} />\n\n// Full card escape hatch\n<OrgChart data={people} renderCard={(person) => <div>{person.name}</div>} />\n```\n\nTheme via CSS variables:\n\n```css\n:root { --ananse-edge-highlight: #7c3aed; }\n```\n\n## Extensibility\n\n| Gap | API |\n|-----|-----|\n| i18n | `labels` / `plugins[].labels` |\n| Custom RF nodes/edges | `nodeTypes`, `edgeTypes`, `getNodeType` |\n| Free edges (matrix) | `extraEdges` + `dottedLineManagerIds` |\n| BYO layout | `layout={(employees, opts) => LayoutResult}` |\n| Replace inspector / vacant UI | `renderInspector`, `renderAddVacant` |\n| Light plugins | `plugins={[{ id, labels, nodeTypes, edgeTypes }]}` |\n\n## Docs & recipes\n\n- Full README, positioning, and FAQ: <https://github.com/pkdadson/ananse#readme>\n- Recipes: <https://github.com/pkdadson/ananse/tree/main/docs/recipes>\n  - Quickstart, theming, density, CSV/HRIS, editor mode, SSR/Next.js, persist, extensibility, hierarchy-beyond-people\n\n## FAQ\n\n**Blank chart?** Pass `height=\"100vh\"` or ensure the parent has a real height. Dev builds warn when height ≈ 0.\n\n**SSR / Next?** Use `dynamic(() => import(\"@ananse/react\").then(m => m.OrgChart), { ssr: false })`.\n\n**Save to my API?** `onChange` or `onMutation` — see the [persist recipe](https://github.com/pkdadson/ananse/blob/main/docs/recipes/07-persist-and-api.md).\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-85caaaab7b1848a4897130e490517e5b"}