Quick, show me the code!
import { ComponentProps, ComponentType } from 'react';
type Props<C extends ComponentType<any>> = {
Component: C;
} & ComponentProps<C>;
const FancyComponent = <C extends ComponentType<any>>({
Component,
...rest
}: Props<C>) => {
return <Component {...rest} />;
};
Ok, what's going on here?
Props<C> is a generic type that takes a component type C and returns a type that is a record with a key "component" that takes value C then we union that with ComponentProps<C>
ComponentProps<C> represents the record of props that a component C takes.
Return home to Smooth Unfolding