About Polymorphic Components

Learn what polymorphic components are, and how they differ from standard React components.

We'll cover the following

Introduction

When we start learning React, one of the first concepts we're taught is how to build reusable components. This is essentially the fine art of writing components once and reusing them multiple times. In foundational React, the essential building blocks of classic reusable components are props and state—props are external and state is internal.

The essential building blocks of reusability remain the same for building polymorphic reusable components. In other words, props will be used to pass data, whereas state will be used for managing data.

Press + to interact
The building blocks of reusable components
The building blocks of reusable components

However, we will take advantage of props to allow the users of our component to decide what element to eventually render.

Prerequisites for the course

  • Familiarity with React basics

  • Familiarity with TypeScript basics

Intended audience

  • React developers building design systems

  • React developers building reusable components

  • React TypeScript developers

  • Other curious intermediate React developers

Course objectives

By the end of this course, you'll have learned:

  • To build polymorphic React components.

  • Go beyond basic TypeScript utility types and apply intermediate utilities.

  • About the practical applications of TypeScript generics.

  • How to build a reusable polymorphic utility.

  • How to handle strongly typed polymorphic refs.

  • Use TypeScript to enforce only valid HTML attributes, based on a certain polymorphic prop.

Leveraging props for reusability

Let's consider the following React component.

Press + to interact
const MyComponent = (props) => {
  return (
    <div>
     This is an excellent component with props {JSON.stringify(props)}
   </div>
  );
};

As in the example above, typically, our component would receive some props.

Based on the props provided, we may then render a React element, which gets translated to the corresponding DOMDocument Object Model element.

In the example above, a div container element is rendered, and the props are displayed within the div.

What if our component could take in props and do more than just provide some data to be consumed within our component?

And, instead of MyComponent always rendering a div, what if we could pass in a prop to determine the eventual element rendered to the DOMDocument Object Model?

This is where polymorphic components come in.

Press + to interact
Polymorphic component props
Polymorphic component props

What is a polymorphic component?

According to Oxford Languages, the word polymorphic means "occurring in several forms."

In the world of React components, a polymorphic component is a component that can be rendered to a different container element or node. Implementing a polymorphic component is a popular React pattern for extending the reusability of React components.

In a nutshell, the pattern lets us specify which HTML tag to use for rendering our component, while using a certain prop.

Explore open-source component libraries

Open-source component libraries typically implement some sort of polymorphic component, and studying them is a good way to get acquainted with polymorphic components.

In the following lessons, we'll explore some popular React open-source component libraries and how they use polymorphic components.

But before we do that, take a minute to skim through the documentation of an open-source component library. Does it support polymorphic components? Does it support a way to render a different element of choice while using pretty much the same API?

Question

How do I know if a library supports polymorphic components?

Show Answer