Gain insights into building strongly typed polymorphic React components using TypeScript. Learn about naive implementations, advanced use cases, and creating reusable utilities for design systems.

data.tar.gz

chakra-ui-polymorphic-example

material-ui-polymorphic-example

basic-polymorphic-example

basic-polymorphic-ts-example

border-exercise

TypeScript has become the de facto way to build modern web applications. With the rise of design systems and reusable components, building strongly typed polymorphic components is a desirable skill for the modern web engineer. 

This course provides a bottom-up approach to building strongly typed polymorphic components. You will start with a naive implementation of a polymorphic component and explore its drawbacks. You will then use TypeScript to provide a production-ready component interface. Finally, you’ll support advanced use cases with component refs and build a reusable utility you can use on multiple components. 

By the end of the course, you’ll be ready to build components fit for a design system and go beyond basic reusable needs.

Using TypeScript for Building Polymorphic React Components

There is a significant performance issue with `React.ComponentWithRef`.

`React.ComponentPropsWithRef` accepts a generic while `React.ComponentPropsWithoutRef` doesn't.

`React.ComponentPropsWithRef` includes component props with `ref` support, unlike `React.ComponentPropsWithoutRef`.

`React.ComponentPropsWithRef` does not extend a component prop while `React.ComponentPropsWithoutRef` does.

What is the difference between `React.ComponentPropsWithRef` and `React.ComponentPropsWithoutRef`? 

What is the difference between <code>React.ComponentPropsWithRef</code> and <code>React.ComponentPropsWithoutRef</code>?

Refs are a feature that provides access to React elements created in the render method.

Refs are a way to store data in the local component state.

Refs provide a way to access DOM nodes created in the render method of your component.

Refs are used to catch errors anywhere in their child component tree.

**(Select all that apply.)** What is the purpose of refs in React? 

(Select all that apply.) What is the purpose of refs in React?

What type of elements can refs be used with?

What type of elements can refs be used with?

What is the preferred way to pass refs down to a functional component? 

What is the preferred way to pass refs down to a functional component?

Using type indexing returns a nested object type.

Using type indexing will return an `object` type, not the `ref` type we seek. 

Using type indexing will return the specific `ref` type, while `Pick` will return an `object` type in the form `{ref: SomeRefDefinition}`.

Using type indexing is a much easier solution than using the `Pick` utility. 

In our solution to obtain a component `ref` type, why did we choose type indexing over the `Pick` utility, i.e., using 
`React.ComponentPropsWithRef<C>["ref"]` and not 
`Pick<React.ComponentPropsWithRef<C>, "ref">`?

In our solution to obtain a component <code>ref</code> type, why did we choose type indexing over the <code>Pick</code> utility, i.e., using
<code>React.ComponentPropsWithRef&lt;C&gt;[&quot;ref&quot;]</code> and not
<code>Pick&lt;React.ComponentPropsWithRef&lt;C&gt;, &quot;ref&quot;&gt;</code>?

Take a quiz on building polymorphic components with ref support.


Introduction

Strongly Typed Polymorphic Components

Build a Reusable Polymorphic Type Utility

Polymorphic Component with Ref Support

Exercise and Conclusion

Quiz