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

Receiving Valid HTML Element Strings

Explore how to use React.ElementType with TypeScript generics to restrict polymorphic components to valid HTML element strings. Understand how this approach prevents invalid element type errors and ensures type-safe component usage.

We'll cover the following...

To complete our solution, we’ll leverage the internal React type React.ElementType, and make sure the generic prop is constrained to fit that type, as shown below:

TypeScript 3.3.4
export const PolymorphicText = <C extends React.ElementType>({
  as,
  children,
}: {
  as?: C;
  children: React.ReactNode;
}) => {
  const Component = as || "span";
  return <Component>{children}</Component>;
};
...