Are there plans to support as property along with asChild?

[bohdanbirdie]

Hi!

I couldn't find the answer in the docs, but perhaps this topic can be unwrapped in this discussion.
Both Ark and Radix are using prop asChild to re-assign the element of the component.
https://ark-ui.com/react/docs/guides/composition

Yet Chakra used as property instead, which seems more flexible to me.
https://v2.chakra-ui.com/community/recipes/as-prop

Here is the example, using ParkUI:

import React from 'react'
import { Button, ButtonProps } from 'ui-kit/button'
import { Text } from 'ui-kit/text'

export const MySpecialButton: React.FC<ButtonProps> = ({ ...props }) => {
  return (
    <Button {...props} variant='subtle'>
      <Text>Title</Text>
      <Text>Description</Text>
    </Button>
  )
}

// I want this button to work as link now
const AsLink = () => {
  return <MySpecialButton>???</MySpecialButton> 
}

I can't see a way to make it work as a link here as the direction of asChild only goes down. But I would as property was supported.

In Chakra I would solve this with a little effort:

const AsLink = () => {
  return <MySpecialButton as='a' />
}

But in the ark, I have to do this sort of wrapping, resulting it way less flexibility.

import React, { Children, Fragment } from 'react'

import { Button, ButtonProps } from 'ui-kit/button'
import { Text } from 'ui-kit/text'

export const MySpecialButton: React.FC<ButtonProps> = ({
  children,
  ...props
}) => {
  const hasDirectChild = Boolean(
    children && Children.only(children) && React.isValidElement(children),
  )
  const directDescendant = hasDirectChild ? children : <Fragment />

  return (
    <Button {...props} variant='subtle'>
      {React.cloneElement(directDescendant as React.ReactElement, {
        children: (
          <>
            <Text>Title</Text>
            <Text>Description</Text>
          </>
        ),
      })}
    </Button>
  )
}

const AsLink = () => {
  return (
    <MySpecialButton>
      <a href='#' />
    </MySpecialButton>
  )
}

Going back to the original question, are there any plans to support as property? If not, what are the suggestion you might have to make it simpler/flexible?

[segunadebayo]

We don’t have plans to support to the as prop due to the type complexity it introduces. It’s hard to get it right for all frameworks

[bohdanbirdie]

Unfortunate
But thanks for reply!