What is the Typescript type to accept any kind of React Component as prop?

Question

I have a component that can accept another component as a prop.

Very simplified example:

interface Props {
  Comp: React.ComponentClass<unknown> | React.SFC<unknown>
}

const MyComp: React.FC<props> = ({ Comp }) => {
  return React.createElement(Comp)
}

What would be the most simple type for Comp that accepts functional components, class based components, etc?

The type definition of createElement makes it look rather complicated https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/v16/index.d.ts#L286

Answer 1

React.ComponentType

React.ComponentType<P> is the type for either a class component (React.ComponentClass<P>) or function component (React.FunctionComponent<P> aka React.FC<P>) which takes props P.

(FYI, React.ReactNode and React.ReactElement are the types for the JSX returned by the component - not for a callable component)

Typing Comp's Props

You do not want to use <unknown> in your Props type. You want to declare that the component requires only the props which you are providing when you call React.createElement(Comp) (you call also use JSX and return <Comp/>). In this case you are providing no props, so it would be React.ComponentType<{}> or just React.ComponentType since {} is the default for P.

interface Props {
  Comp: React.ComponentType;
}

const MyComp: React.FC<Props> = ({ Comp }) => {
  return <Comp />
}

with some props:

interface Props {
  Comp: React.ComponentType<{someKey: string}>;
}

const MyComp: React.FC<Props> = ({ Comp }) => {
  return <Comp someKey="someValue" />
}

You will get an error if you call Comp without providing someKey, which is good! You don't get that error when calling React.createElement(Comp) because for some reason the props argument is optional. So in my opinion the JSX approach is better.