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

polymorphic-components-react-8.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";
};

type Props <C extends React.ElementType> = 
React.PropsWithChildren<ButtonProps<C>> &   
Omit<React.ComponentPropsWithoutRef<C>, keyof ButtonProps<C>>;
   
export const Button = <C extends React.ElementType = 'button'>({ 
  as,
  children,
  color, // 👈 look here
  ...otherProps
}: Props<C>) => {    
  const Component = as || 'button';

  // را با استایل‌های وارد شده در یک آبجکت ذخیره می‌کنیم color مقدار ورودی
  const styles = color ? { style: {...otherProps.style, color } } : {style: {...otherProps.style} };
  
  // در نهایت به کامپوننت پاس می‌دهیم
  return <Component {...otherProps} {...styles}>{children}</Component>;
};