@klad/react

The React adapter for Klad — a tree engine that stays smooth where a chart made of elements cannot, by laying out and drawing the tree on a <canvas> inside a Web Worker, mounting real React components only for the nodes currently on screen and zoomed in far enough to read.

npm install @klad/react

Peer dependency: react >=18.

import { Klad, type Options } from '@klad/react'

const options: Options = {
  data: [
    { id: 'ceo', name: 'Jamie Fox', title: 'CEO' },
    { id: 'cto', parentId: 'ceo', name: 'Amy Chen', title: 'CTO' },
    { id: 'cfo', parentId: 'ceo', name: 'Priya Rao', title: 'CFO' },
  ],
}

export function Chart() {
  return (
    <Klad options={options} style={{ width: '100%', height: '100vh' }}>
      {({ item, hasChildren, open, toggle }) => (
        <div className="card">
          <strong>{String(item.name)}</strong>
          {hasChildren && (
            <button type="button" onClick={toggle}>
              {open ? '−' : '+'}
            </button>
          )}
        </div>
      )}
    </Klad>
  )
}

The render prop is called for the ~50 nodes in the viewport, into pooled elements reused across frames — never once per node in the tree. Omit it entirely and no overlay DOM is created at all.

Reach the imperative API through a ref on <Klad> (chartRef.current?.api).

Guide, API reference and roadmap: the documentation.

Licence

Dual-licensed: GNU AGPL v3 or later, or a commercial licence for use the AGPL does not permit — see LICENSE-COMMERCIAL.md, or email [email protected].