Skip to main content
getComponentData(child: () => Component): ComponentData;
​
child
() => Component
required
A function that returns a component. The function is inspected (not executed) to extract the component’s AST data.

​
Returns

A ComponentData object:
​
name
string | null
The component name, or null if the AST node could not be resolved.
​
props
Record<string, any>
The component’s props as a key-value object.

​
Usage

​
Extract component information

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: 
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

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 return their registered name.
  • Built-in components return their standard names (e.g., "Text", "Image", "VStack").