Build strongly typed polymorphic components with React and TypeScript - Part 3 (Support Other Valid Props, Based On The Value Of As)

polymorphic-components-react-3.tsx

import * as React from 'react';

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

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

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