Using TypeScript for Building Polymorphic React Components/

...

/

Receiving Valid HTML Element Strings

Receiving Valid HTML Element Strings

Build a complete polymorphic component that receives only valid HTML element strings.

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:

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