Custom Nodes

renderNode hands you a context object per row and gets out of the way entirely — this renders file sizes TreeKit has no built-in concept of.

src

components

Button.tsx2.1 KB

Input.tsx1.4 KB

Modal.tsx3.8 KB

hooks

index.ts0.4 KB

public

package.json1.1 KB

README.md4.6 KB

Show code

<TreeKit
  data={fileTree}
  showCheckboxes={false}
  renderNode={(ctx) => (
    <div onClick={() => { ctx.selectNode(); if (ctx.hasChildren) ctx.toggleExpanded(); }}>
      {ctx.hasChildren ? <FolderIcon open={ctx.expanded} /> : <FileIcon />}
      <span>{ctx.node.label}</span>
      {ctx.node.data?.sizeKb && <span>{ctx.node.data.sizeKb} KB</span>}
    </div>
  )}
/>

Full context shape and the rules for composing with TreeKit's focus/ARIA handling in Custom Rendering.