Is there a way to create custom components that support the render prop?

[gnapse]

I've dug into the code, and realized that the render prop used for composition is powered by Ariakit's internal createElement function.

Is there a way to leverage this function to create components outside Ariakit that also support Ariakit's composition pattern?

Bonus question: what's the wrapElement prop? Is it documented somewhere?

[diegohaz]

Yes, you can use the Role component:

function MyComponent(props) {
  return <Role.div render={props.render} />;
}

wrapElement is a lower-level prop used by internal hooks to wrap the underlying element with other components like providers and React portal. You likely will never need it unless you're building custom component hooks like useDialog, usePopover, etc. Since those hooks don't return the JSX elements, but just the props to be passed to other elements, they use this custom wrapElement prop that will be later consumed by Ariakit's own createElement or Role.