useNodeTree Hook

The useNodeTree composable accesses the component node tree structure for tracking component hierarchy and debugging.

Use useNodeTree when: Building debugging tools, tracking component hierarchy, or implementing custom devtools.

Perfect for: Debugging utilities, component tracking, metadata storage, custom tooling.

Usage

Access the component tree node structure.

Example: Access and manipulate the node tree.

import { useNodeTree } from '@kubb/fabric-core'

function MyComponent() {
  const nodeTree = useNodeTree()

  if (nodeTree) {
    const childTree = nodeTree.addChild({
      type: 'MyComponent',
      props: {}
    })
  }

  return null
}

Return Value

Returns the current TreeNode<ComponentNode> or null if not within a component that provides NodeTreeContext.

When to Use

Use useNodeTree when you need to:

• Track component hierarchy
• Debug rendering
• Build custom devtools or debugging utilities
• Store component metadata and relationships

Examples

Tracking Component Hierarchy

import { useNodeTree, provide, NodeTreeContext } from '@kubb/fabric-core'

function MyComponent({ children }: { children: any }) {
  const nodeTree = useNodeTree()

  if (nodeTree) {
    // Add this component to the tree
    const childTree = nodeTree.addChild({
      type: 'MyComponent',
      props: { name: 'example' }
    })

    // Provide the child tree for nested components
    provide(NodeTreeContext, childTree)
  }

  return children
}

See Also

• Fabric - Fabric container component
• Root - Root component with tree structure
• useContext - Generic context access