Build Polymorphic Components with React and Typescript

Extend your knowledge of reusable components and utilise techniques used by your favourite open-source React libraries …

Polymorphic components?

You’ve probably used them before … If you’ve used material UI’s component prop or Chakra UI’s as prop, then you’ve already encountered polymorphic React components.

In this class, you will learn to build your own polymorphic component that can be rendered as any valid HTML element. More importantly, you will learn to strongly type its allowed props based on the supplied element type. There will be many use cases and edge cases discussed along the way to help you build more robust reusable React components with a great developer experience.

How can you apply this knowledge?

1. Build more flexible reusable components

2. Apply the gained knowledge to building your own design system

3. Explore intermediate Typescript concepts for truly strongly typed polymorphic components

Prerequisites

1. You are familiar with React basics

2. You are familiar with Typescript basics

Who is this class for?

1. React developers building design systems

2. React developers building reusable components

3. React Typescript developers

4. Other curious intermediate React developers

In summary, this is not a beginner’s course. You need to know some React, and some Typescript (the basics at least i.e., you know what “types” are).

You will learn intermediate typescript in this course. It’ll be practical, effective and straight to the point – a course you will actually complete.

You will learn to build your own polymorphic component that can be rendered as any valid HTML element. That’s easy! What’s not so easy is strongly typing its allowed props based on the supplied element type. Restricting the component props dynamically, type-safe the passed refs to the props and even building a utility you can reuse on any other reusable component.

There will be many use cases and edge cases discussed along the way to help you build more robust reusable React components with a great developer experience.

Rating Distribution

• 1 stars: 1 votes
• 2 stars: 0 votes
• 3 stars: 4 votes
• 4 stars: 38 votes
• 5 stars: 113 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!