Stumble upon the blog post “Writing Type-Safe Polymorphic React Components (Without Crashing TypeScript)” today and get the answer that I always trying to solve every few weeks and gave up after wasting few hours: how to properly type the as props in React component in TypeScript.
The summary of that post is this: to type as props properly requires black-magic of knowledge in TypeScript (the author works on TypeScript language and compiler!) and you may crash the TypeScript service when you do that. The solution is to use render-props pattern to allow consumer to change the html tag themselves.
In short, instead of this:
<Button color="primary" as="a" href="/hello">
Hello
</Button>
Design your API like this:
<Button color="primary" renderContainer={(buttonProps) => <a href="/hello" {...buttonProps} />}>
Hello
</Button>
Yeah, it’s ugly. I know. I agree with you.