Improve the AsType to support inheriting props from a passed component

[brettdorrans]

import React, { ComponentType, HTMLAttributes } from 'react';

type AsProp<C extends keyof JSX.IntrinsicElements | ComponentType<any>> = {
  as?: C;
} & (C extends keyof JSX.IntrinsicElements
  ? JSX.IntrinsicElements[C]
  : C extends ComponentType<infer P>
  ? P & HTMLAttributes<HTMLElement>
  : never);

type ComponentProps<C extends keyof JSX.IntrinsicElements | ComponentType<any>> = AsProp<C>;

function Component<C extends keyof JSX.IntrinsicElements | ComponentType<any>>({
  as: Component = 'div' as C,
  ...props
}: ComponentProps<C>) {
  return <Component {...props} />;
}

export default Component;

In this implementation, the ComponentProps type defines a generic type C that can be either a string representing a valid HTML element or a React component type. The as prop is defined as optional, and its type is set to C.

The AsProp type is used to merge the as prop type with the props of the component specified in as. If C is a string representing an HTML element, the type of as prop is merged with the HTML attributes of that element. If C is a React component, the type of as prop is merged with the props of that component.

The Component function takes in the as prop and spreads the rest of the props onto the component specified in as. If no as prop is specified, it defaults to the div element. The Component function returns the specified component with the props passed in.

You can use the component like this:

import React from 'react';
import Component from './Component';

function AnotherComponent({ text }: { text: string }) {
  return <h1>{text}</h1>;
}

function App() {
  return (
    <div>
      <Component as="span">This is a span</Component>
      <Component as={AnotherComponent} text="This is AnotherComponent" />
    </div>
  );
}

export default App;

In the example above, we're rendering two instances of Component, one with an as prop of "span", and another with an as prop of AnotherComponent. In the second case, we're passing in the text prop to AnotherComponent.

[brettdorrans]

https://itnext.io/react-polymorphic-components-with-typescript-f7ce72ea7af2