Search⌘ K
Home
Courses
Using TypeScript for Building Polymorphic React Components

Polymorphic Component Element Attributes

Explore no attribute support for the basic polymorphic component implementations.

We'll cover the following...

Introduction

Let's consider the current simple implementation again:

TypeScript 3.3.4
import React from "react";
export const PolymorphicText = ({ as, children }) => {
  const Component = as || "span";
  return <Component>{children}</Component>;
};

The only props this component accepts are as and children, and nothing else.

Javascript (babel-node)
const PolymorphicText = ({ as, children }) => {
  ...
};

There’s no attribute support taken into consideration here. For example, if as were the anchor element a, a consumer should also be able to pass href to the component.

TypeScript 3.3.4
<PolymorphicText as="a" href="https://www.example.com"> Link </PolymorphicText>
...