Using TypeScript for Building Polymorphic React Components/

...

/

Polymorphic Component Element Attributes

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>
...