hoc-to-render-prop-component

hoc-to-render-prop.tsx

type HOC<InputProps, EnhancedProps> = (component: React.ComponentType<InputProps & EnhancedProps>) =>
  React.ComponentType<InputProps>;

type RenderPropProps<InputProps, EnhancedProps> = {
  [P in keyof InputProps]: InputProps[P];
} & {
  children: (props: EnhancedProps) => React.ReactNode;
};

type RenderProp<InputProps, EnhancedProps> = React.ComponentType<RenderPropProps<InputProps, EnhancedProps>>;

function hocToRenderPropComp<InputProps, EnhancedProps>(
  hoc: HOC<InputProps, EnhancedProps>,
): RenderProp<InputProps, EnhancedProps> {
  const Enhanced = hoc((props: EnhancedProps) => {
    // cast props to any as TS doesn't currently support rest/spread on generics
    const { children, ...rest } = props as any;
    return children(rest as EnhancedProps);
  });

  return (props) => <Enhanced {...props} />;
}

function autoRenderCompWithHOC<InputProps, EnhancedProps>(
  hoc: HOC<InputProps, EnhancedProps>,
  Component: React.ComponentType<InputProps & EnhancedProps>,
): React.ComponentType<InputProps> {
  const RenderComp = hocToRenderPropComp<InputProps, EnhancedProps>(hoc);
  return (props) => (
    <RenderComp {...props}>
      {(result) => <Component {...result} />}
    </RenderComp>
  );
}