What you’ll learn:
Build polymorphic React components
Apply intermediate Typescript utility types
Practically use Typescript generics
Use Typescript to restrict the polymorphic prop to accept only valid HTML elements
Based on the generic polymorphic prop, use Typescript to enforce only valid props of the passed HTML element
Build a reusable Polymorphic utility
Handle strongly typed Polymorphic refs
Requirements:
You already know some React
You already know some Typescript (at least the basics)
Description:
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?
Build more flexible reusable components
Apply the gained knowledge to building your own design system
Explore intermediate Typescript concepts for truly strongly typed polymorphic components
