> ## Documentation Index
> Fetch the complete documentation index at: https://docs.metabind.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# getComponentData

> Extracts the underlying component name and props from a builder function.

```typescript theme={null}
getComponentData(child: () => Component): ComponentData;
```

<ParamField path="child" type="() => Component" required>
  A function that returns a component. The function is inspected (not executed) to extract the component's AST data.
</ParamField>

## Returns

A `ComponentData` object:

<ParamField path="name" type="string | null">
  The component name, or `null` if the AST node could not be resolved.
</ParamField>

<ParamField path="props" type="Record<string, any>">
  The component's props as a key-value object.
</ParamField>

## Usage

### Extract component information

```typescript theme={null}
const body = () => {
    const data = getComponentData(() => Text("Hello World"))
    // data = { name: "Text", props: { text: "Hello World" } }

    return Text("Component: " + data.name)
}
```

### Inspect modified components

The function unwraps modifiers to find the core component:

```typescript theme={null}
const body = () => {
    const data = getComponentData(() =>
        Text("Styled Text")
            .foregroundStyle(Color("blue"))
            .font("headline")
            .bold()
    )
    // data = { name: "Text", props: { text: "Styled Text" } }

    return Text("Found: " + data.name)
}
```

### Conditional rendering based on child type

```typescript theme={null}
const body = (props, children) => {
    const childData = getComponentData(() => children[0])

    if (childData.name === "Image") {
        return VStack([
            Text("Image detected").font("caption"),
            children[0]
        ])
    }
    return children[0]
}
```

## Notes

* Modifiers are automatically unwrapped to find the core component.
* If the component cannot be identified, `name` will be `null`.
* The returned props are the direct props passed to the component, not computed values.
* Custom components defined with [defineComponent](/bindjs/functions/defineComponent) return their registered name.
* Built-in components return their standard names (e.g., `"Text"`, `"Image"`, `"VStack"`).