Build Polymorphic Components with React and Typescript

Polymorphic elements

You’ve probably already used these… You’ve probably encountered polymorphic React components if you’ve utilized Material UI’s component prop or Chakra UI’s as a prop.

You will learn how to create your own polymorphic component that may be displayed as any legal HTML element in this class. You’ll also learn how to strongly type its allowable props depending on the element type given. Along the way, many use cases and edge cases will be looked at to help you make React components that are more stable, reusable, and give developers a good experience.

What can you do with this information?

1. Create more reusable and adaptable components.
2. Create your own design system using what you’ve learned.
3. Investigate intermediary Typescript notions for polymorphic components that are actually strongly typed.

Required

1. You’ve learned the fundamentals of React.
2. Typescript fundamentals are second nature to you.

For whom is this class intended?

1. React programmers create design systems.
2. React programmers create reusable components.
3. Developers of React and Typescript
4. Another fascinating intermediary is React developers.

To summarise, this is not a course for beginners. You’ll need to be familiar with React and Typescript (the basics at least, i.e., you know what “types” are).

This course will teach you intermediate typescript. It will be a hands-on, effective, and direct course that you will really finish.

You’ll learn how to create a polymorphic component that may be displayed as any legal HTML element. That was simple! What’s more difficult is strongly typing its allowable properties depending on the element type given. type-safe the provided prop references dynamically and even make a utility that can be used on any other reusable component.

Along the way, many use cases and edge cases will be looked at to help you make React components that are more stable, reusable, and give developers a good experience.