I am working on a TypeScript + React project. For a component, I want to use the polymorphic as prop. However, I want to restrict it to HTML tags so it will not accept ReactNodes or JSX Elements. But I do not know which type I can use to achieve this.
<Foo as="section">...</Foo> ✅
<Foo as={SomeOtherComponent}>...</Foo> ❌
I have tried using React.ElementType but that still looks to accept other components.
interface Foo {
as?: React.ElementType
}
Which type could I use to accept only HTML tags but not other elements or nodes?
>Solution :
You could accept only a string, not a function:
interface Foo {
as?: string;
}
Or you could more specifically accept only known HTML tag names using a string literal union; you don’t have to write out the names yourself, you can get them from HTMLElementTagNameMap in lib.dom.d.ts:
interface Foo {
as?: keyof HTMLElementTagNameMap; // This is "a" | "abbr" | "address" ...
}