Polymorphic

The <Polymorphic /> component is an extended version of Solid’s <Dynamic /> component and allows you to additionally render as the first <As /> component present in its children. It is used in all primitive components of corvu which render an element. Check out the Dialog primitive for examples.

Usage

import { Polymorphic, As } from 'corvu'
import type { PolymorphicProps } from 'corvu'

const Button = <T extends ValidComponent = 'button'>(
  props: PolymorphicProps<T>,
) => {
  return (
    <Polymorphic as={props.as} asChild={props.asChild}>
      {props.children}
    </Polymorphic>
  )
}

<Button as="a" href="https://corvu.dev">
  corvu
</Button>

asChild

If you happen to have a component that uses the as prop for itself, you can use the <As /> component in combination with asChild:

<Button asChild href="https://corvu.dev">
  <As component={MyCustomComponent} as="a">corvu</As>
</Button>

💡 You might have seen react libraries accomplish the same without the need for an additional <As /> component. Unfortunately this isn’t possible in SolidJS because children are generally just DOM elements.

API reference