title: Infer type of props based on component passed also as prop
body: <p>Is it possible to infer correct types for props from an unknown component passed also as a prop?</p>
  
  <p>In case of known component (that exists in current file) I can get props:</p>
  
  <pre><code>type ButtonProps = React.ComponentProps&lt;typeof Button&gt;;
  </code></pre>
  
  <p>But if I want to create a generic component <code>Box</code> that accepts a component in <code>as</code> prop and the component's props in <code>props</code> prop. The component can add some default props, have some behavior, it doesn't matter. Basically its similar to higher-order components, but its dynamic.</p>
  
  <pre><code>import React from "react";
  
  export interface BoxProps&lt;TComponent&gt; {
    as?: TComponent;
    props?: SomehowInfer&lt;TComponent&gt;; // is it possible?
  }
  
  export function Box({ as: Component, props }: BoxProps) {
    // Note: it doesn't have to be typed within the Box (I can pass anything, I can control it)
    return &lt;Component className="box" title="This is Box!" {...props} /&gt;;
  }
  
  function MyButton(props: {onClick: () =&gt; void}) {
    return &lt;button className="my-button" {...props} /&gt;;
  }
  
  // usage:
  
  function Example() {
    // I want here the props to be typed based on what I pass to as. Without using typeof or explicitly passing the generic type. 
    return (
      &lt;div&gt;
        &lt;Box
          as={MyButton}
          props={{
            onClick: () =&gt; {
              console.log("clicked");
            }
          }}
        &gt;
          Click me.
        &lt;/Box&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>requirements:</p>
  
  <ul>
  <li>must work without passing the generic type (is it possible?), because it would be used almost everywhere</li>
  <li>must work with user-defined components (<code>React.ComponentType&lt;Props&gt;</code>)</li>
  <li>would be great if it worked also with react html elements (a, button, link, ...they have different props), but not necessary</li>
  </ul>