Read on Twitter
A polymorphic component is a reusable component in React enabling the caller to choose the HTML element it'll render at its root w/ the `as` prop
TypeScript allows us to dynamically support additional strongly-typed props based on the desired HTML element
/thread
TypeScript allows us to dynamically support additional strongly-typed props based on the desired HTML element
/thread
So the following work & are type-safe:
<Text
as="label"
htmlFor="name-field"
font="heavy"
color="gray-70"
>
Name
</Text>
(passing `htmlFor` for a `<label>`)
<Text style={{ position: 'relative' }}>Ben</Text>
(passing `style` available to all elements)
<Text>Ben</Text>
<Text
as="label"
htmlFor="name-field"
font="heavy"
color="gray-70"
>
Name
</Text>
(passing `htmlFor` for a `<label>`)
<Text style={{ position: 'relative' }}>Ben</Text>
(passing `style` available to all elements)
<Text>Ben</Text>
But these throw type errors:
<Text
as="h1"
href=" https://www.benmvp.com "
font="thin"
color="gray-50"
>
Main Heading
</Text>
(no `href` on `<h1>`)
<Text as="benmvp">Ben!</Text>
(no `<benmvp>` yet
)
<Text
as="h1"
href=" https://www.benmvp.com "
font="thin"
color="gray-50"
>
Main Heading
</Text>
(no `href` on `<h1>`)
<Text as="benmvp">Ben!</Text>
(no `<benmvp>` yet
)
Curious how all of these TypeScript generics work together to make this all happen? Well, I've got a post diving into the details just for you! 
https://www.benmvp.com/blog/polymorphic-react-components-typescript/?utm_source=twitter&utm_medium=social&utm_campaign=init-share
https://www.benmvp.com/blog/polymorphic-react-components-typescript/?utm_source=twitter&utm_medium=social&utm_campaign=init-share
I don't go into in the post because I wanted to keep it short, but you can use other user-defined components in addition to HTML elements for `as` too!
<Text as={Link} to={...}>Go!</Text>
And you'll be able to pass the other component's props in a type-safe manner as well
<Text as={Link} to={...}>Go!</Text>
And you'll be able to pass the other component's props in a type-safe manner as well
I'm pretty sure I promised @kylewelch this post like 6 months ago. Here ya go buddy! 
