Attach a property to a functional component wrapped with React.forwardRef

Question

I have a component wrapped with React.forwardRef and it so happens that it is a compound component as well.

I'm not sure how do I maintain

Form.Item  = FormItem;

while the Form component function being wrapped with forwardRef .

const Form = React.forwardRef((props, ref) => { return <form></form>});

Typescript gives me an error (rigthly) saying

Property 'Item' does not exist on type 'ForwardRefExoticComponent>'.ts(2339)

Answer 1

Just to make it more clear of the solution, as it's on an external site (Credits to original author here , and thank you @Antoan Elenkov)

export interface Props = {
   ...yourPropsHere;
};

export interface CompoundedComponent extends React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>> {
   yourStaticFunctionOrSomethingLikeThat: () => void;
}

const Component = React.forwardRef<HTMLInputElement, Props>((props, ref) => (
    <input ref={ref} {...props} />
)) as CompoundedComponent;

Component.yourStaticFunctionOrSomethingLikeThat = () => {};

Answer 2

This solution from the same GH thread seems nicer to me:

const Form = React.forwardRef(function Form(...) {
  ...
})

const FormItem = React.forwardRef(...)

const FormNamespace = Object.assign(Form, {Item: FormItem})

export {FormNamespace as Form}