Overview
Ark UI offers a flexible way to render components using the asChild prop. This
prop allows you to replace the default component with a custom child element
while maintaining the necessary behavior, such as event handling, and passing
down props and refs. Every component that is exported in Ark UI has support for
the asChild prop.
Usage
Consider a component like MenuTrigger, which also supports the asChild prop.
Default Behavior
By default, the original MenuTrigger component will be rendered with its
default appearance and behavior:
<MenuTrigger>Open Menu</MenuTrigger>Customizing with asChild
To replace the default MenuTrigger with a custom child element (e.g., a
Button), set the asChild prop to true and pass the custom child element:
<MenuTrigger asChild>
<Button>Open Menu</Button>
</MenuTrigger>When using the asChild prop, the library ensures that the custom child element
receives all the required props from the parent component and combines them with
the child’s existing props. In addition, if a ref is provided, it will be
composed with the child’s ref and passed down correctly.
Limitations
When using the asChild prop, ensure that you only pass a single child element.
If you pass multiple children, the component may not render correctly.
Summary
The asChild prop provides a convenient way to customize the appearance and
behavior of components in Ark UI, such as MenuTrigger. Use the asChild prop to
replace the original component with a custom child element, and the library will
take care of merging and forwarding props and refs as needed.