Using TypeScript for Building Polymorphic React Components/

...

/

Building the Reusable Utility

Building the Reusable Utility

Learn to build a polymorphic reusable type utility.

We'll cover the following...

We have established that the API for our reusable utility will look like this: 

PolymorphicProps<C, TextProps>
The proposed API for the reusable utility

Now, let’s now go ahead and define the PolymorphicProps type.

Press + to interact
type PolymorphicProps<
  C extends React.ElementType,
  Props = {}
> = {}

The definition above is similar to some of the examples we've previously considered. In this example, C represents the element type passed in as, and Props represents the actual component props for the component on which the reusable utility will be used. Also, note that the type alias points to an empty object type for now.

Defining the utility types

Let's begin to refactor our PolymorphicText implementation to leverage the reusable utility when it's complete. We'll go ...