Composition
Composition makes Ariakit components more versatile, allowing you to easily replace the default HTML element or enhance its features with custom components.
Dear readers,
This month we’ve introduced a new Composition guide to the Ariakit documentation. This guide offers detailed explanations on using the polymorphic as prop and introduces the new render prop, which aims to simplify the abstraction and extension of Ariakit components with an explicit API:
<TooltipAnchor
title="Open menu"
render={(props) => <MenuButton {...props} />}
>
Menu
</TooltipAnchor>By leveraging the render prop, you can create higher-level APIs that provide the same level of flexibility as any Ariakit component, all without having to handle the intricacies of TypeScript and the as prop.
For a practical demonstration of the render prop in action, I encourage you to explore the Tooltip with Framer Motion example. This example demonstrates how the render prop enables rendering the tooltip anchor as a link.
Thank you for your continued support, and happy exploring!