How to properly type a component where you pass the html tag as a string that it should be rendered with

[cauboy]

Hi,

I'm struggling to properly type a component in Preact. I want to pass the HTML tag the component should be rendered with as a string.

Here's some code to explain myself (and here's a playground on Stackblitz: https://stackblitz.com/edit/preact-tsx-starter-hbjjaq?file=App.tsx):

type ComponentProps = "???" // How to properly define the type?
function MyComponent({ as: Tag = 'button', ...props }: ComponentProps) {
  return (
    <Tag {...props}>Hello World</Tag>
  )
}

function App() {
  return (
    <>
      <MyComponent as="a" href="https://www.example.com" />
      <MyComponent type="button" />
      <MyComponent href="https://www.example.com" /> // <-- This should show an error b/c <button> doesn't have  href attribute
    </>
  )
}

[657KB]

you need to mix type, like this:

import { JSX } from 'preact'

type ComponentProps = { /* your custom prop */ } & JSX.HTMLAttributes<HTMLButtonElement>

const MyComponent = (props: ComponentProps) => {
  return <button {...props}>Hello World</button>
}

[cauboy]

Thanks for your response @kuyermqi.

Unfortunately, that doesn't satisfy my needs yet.

The goal is to have a generic solution. What I need is a Polymorphic component, see e.g. https://docs.astro.build/en/guides/typescript/#polymorphic-type or https://blog.logrocket.com/build-strongly-typed-polymorphic-components-react-typescript/.

However, I cannot make them work with preact.

import { JSX } from 'preact'

type HTMLAttributesOfElement<T> = ??? // How to implement this type?

type Props<T extends JSX.ElementType> = {
  as: T
} & HTMLAttributesOfElement<T>

function MyComponent({ as: Tag, ...props }: Props) {
  return <Tag {...props}>Hello World</Tag>
}

Any help is appreciated

[rschristian]

You can just copy Astro's Polymorphic type if it's what you're after?

https://github.com/withastro/astro/blob/e0ca0d8c8a01ad73b711a9639b854b3f52900750/packages/astro/types.d.ts#L12-L17