Extend your knowledge of reusable components to include strongly typed polymorphic components

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

Leverage the internal React ComponentProps type to handle dynamic component attributes.

Introduction

Strongly Typed Polymorphic Components

Build a Reusable Polymorphic Type Utility

Polymorphic Component with Ref Support

Exercise and Conclusion

The ComponentProps Type