Build strongly typed polymorphic components with React and TypeScript - Part 5

polymorphic-components-react-5.tsx

import * as React from 'react';

type Rainbow = "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "violet";

type ButtonProps<C extends React.ElementType> = {
  as?: C;
  color?: Rainbow | "black"; // 👈 look here
  children: React.ReactNode;
} & React.ComponentPropsWithoutRef<C>;

export const Button = <C extends React.ElementType = 'button'>({ 
  as,
  children,
  ...otherProps
}: ButtonProps<C>) => {    
  const Component = as || 'button';

  return <Component {...otherProps}>{children}</Component>;
};