Q: How to limit the Element Type about polymorphic-react-component HOT 3 OPEN

That's an interesting use case.

@ Misael Burboa (a Discord user) had posted this solution when they needed to do the same:

The crux is in the HtmlTagsAllowed type alias.

from polymorphic-react-component.

I still need to test this, but in the latest version of TS, you might be able to do this via instantiation expressions as follows: Typescript playground

from polymorphic-react-component.

I still need to test this, but in the latest version of TS, you might be able to do this via instantiation expressions as follows: Typescript playground

I tried this solution and it comes close, but you end up losing html attributes that aren't shared among all the elements (aka href on an anchor). I've created an example here

The example you posted from Discord does seem to work in an example env, but I can't seem to get it actually limit the as prop locally (may be something else I'm missing, going to keep testing and will report back). Hopefully this helps others experiment with their own use case. Working example

from polymorphic-react-component.