Polymorphic component props

polymorphic.tsx

import React from 'react'

type PolymorphicPropsFactory<T, P> = {
  as?: T | React.ElementType
  children?: React.ReactNode | undefined
  className?: string | undefined
} & React.RefAttributes<T> &
  P

export type PolymorphicProps<T, FallbackPropsType> =
  // as = Function Component
  T extends React.FunctionComponent<infer P>
    ? PolymorphicPropsFactory<T, P>
    : // as = Class Component
    T extends React.ComponentClass<infer P>
    ? PolymorphicPropsFactory<T, P>
    : // as = HTML Tag
    T extends string
    ? PolymorphicPropsFactory<T, React.HTMLAttributes<T>>
    : // ... fallback
      PolymorphicPropsFactory<T, FallbackPropsType>