TTC
Theo's Typesafe Cult•3w ago
vpjm

Re-Design React Compoent

Hi, I had a really hard time trying to type React components that accept other components as parameters. For example, a component that takes Header, Body, and Footer along with their respective props. Handling just one is manageable, but things get much trickier when a parent component takes several of these kinds of components because it then becomes responsible for merging all the parameters of its children, and the types become very large with lots of generics. In addition, it quickly becomes a type inference nightmare, especially when trying to ensure type safety while keeping things flexible. Managing deeply nested component compositions without losing type information is frustrating. Is there a clean way to type such a setup in TypeScript. Example : 
type ComponentEntry<T> = {
  Component: React.FC<T>;
  props: T;
};

export type ParentComponentProps<HeaderProps , BodyProps , FooterProps , OtherProps > = 
  ([HeaderProps] extends [never] ? {} : { header: ComponentEntry<HeaderProps> }) &
  ([BodyProps] extends [never] ? {} : { body: ComponentEntry<BodyProps> }) &
  ([FooterProps] extends [never] ? {} : { footer: ComponentEntry<FooterProps> }) &
  ([OtherProps] extends [never] ? {} : { other: ComponentEntry<OtherProps> });
type ComponentEntry<T> = {
  Component: React.FC<T>;
  props: T;
};

export type ParentComponentProps<HeaderProps , BodyProps , FooterProps , OtherProps > = 
  ([HeaderProps] extends [never] ? {} : { header: ComponentEntry<HeaderProps> }) &
  ([BodyProps] extends [never] ? {} : { body: ComponentEntry<BodyProps> }) &
  ([FooterProps] extends [never] ? {} : { footer: ComponentEntry<FooterProps> }) &
  ([OtherProps] extends [never] ? {} : { other: ComponentEntry<OtherProps> });
Before trying this pattern, I had already experimented with several other approaches: 1 - At first, I was passing pre-initialized components, so there was no need to pass props explicitly. However, I later needed to create a component that depends on its parent’s props (e.g., <header.Header {...header.props, parentHeader.props} />). 2- Another interesting pattern is using {(parentProps) => children(parentProps)}, but I find it just as complex as the current approach (see the TypeScript example above) Thanks !!
1 Reply
vpjm
vpjmOP•3w ago
What I would like — Example: 
CardItemProps: <HP extends HProps, BP extends BProps> { 
  header: { Header: FC<HP>, props: HP }, 
  body: { Body: FC<BP>, props: BP } 
}
CardItemComponent: <HP extends HProps, BP extends BProps> (props:CardItemProps<HP, BP>)=>FC<{item:any}>

// ListCardItemWithHeaderA builds a list of item cards.

HeaderA : FC<any>
haProps : HAProps

ListCardItemWithHeaderAProps: <HP extends Omit<HProps, keyof HAProps>, BP extends BProps> 
  Pick<CardProps<any, BP>, "body"> & { header: { props: HP } }

ListCardItemWithHeaderA = <...>(props: ListCardItemWithHeaderAProps<HP, BP>) => {
  const { header, body } = props;
  header = {Header:HeaderA,props:{ ...header.props, ...haProps }};
  const CardItem = CardItemComponent({ header, body });
  return <>{data.map((item)=><CardItem item={item}/>)}</>;
}
CardItemProps: <HP extends HProps, BP extends BProps> { 
  header: { Header: FC<HP>, props: HP }, 
  body: { Body: FC<BP>, props: BP } 
}
CardItemComponent: <HP extends HProps, BP extends BProps> (props:CardItemProps<HP, BP>)=>FC<{item:any}>

// ListCardItemWithHeaderA builds a list of item cards.

HeaderA : FC<any>
haProps : HAProps

ListCardItemWithHeaderAProps: <HP extends Omit<HProps, keyof HAProps>, BP extends BProps> 
  Pick<CardProps<any, BP>, "body"> & { header: { props: HP } }

ListCardItemWithHeaderA = <...>(props: ListCardItemWithHeaderAProps<HP, BP>) => {
  const { header, body } = props;
  header = {Header:HeaderA,props:{ ...header.props, ...haProps }};
  const CardItem = CardItemComponent({ header, body });
  return <>{data.map((item)=><CardItem item={item}/>)}</>;
}
Here, to preserve proper typing, whether I use the render pattern or something else, I feel like I always have to explicitly specify the generic types, which is really tedious.

Did you find this page helpful?