Create type for component based on props passed [duplicate]

Question

I'm creating a component that looks like this:

<Button component='a' href='/'>
  Link
</Button>

I want to get the type definition of the component prop, so I can automatically include it in the props for the Button component. Any ideas on what the interface/type for the Button component should look like

Answer 1

I've used this pattern before. Declare the component prop of type React.ComponentType<T> | string. Your Button component should look a bit like this:

export interface ButtonProps {
  component?: React.ComponentType<any>; // or React.ReactElement<any>["type"]
  href?: string;
  children?: React.ReactNode;
}

export function Button(props: ButtonProps) {
  const {
    component: Component = "button", // note: uppercase
    children,
    ...other
  } = props;

  return (
    <Component {...other}>
      {children}
    </Component>
  );
}