Ionic + React + Typescript custom component

Ionic Framework Ionic React
1

I’m trying to create this custom component:

import { IonButton, IonSpinner } from "@ionic/react";

type Props = (typeof IonButton) & {
    isLoading?: boolean;
};

const ButtonWithLoading: React.FC<Props> = ({ isLoading, children, ...props }) => {
    return (
        <IonButton
            disabled={isLoading}
            {...props}
        >
            {isLoading ? <IonSpinner /> : children}
        </IonButton>
    );
};

export default ButtonWithLoading;

but when I try to use it I get an error:

Type '{ children: TFunctionResult; onClick: () => Promise<void>; isLoading: boolean; }' is not assignable to type 'IntrinsicAttributes & ForwardRefExoticComponent<Pick<IonButton, "disabled" | "strong" | "color" | "size" | "fill" | "mode" | "href" | "routerAnimation" | "rel" | ... 7 more ... | "type"> & { ...; } & Pick<...> & IonicReactProps & RefAttributes<...>> & { ...; } & { ...; }'.
  Property 'onClick' does not exist on type 'IntrinsicAttributes & ForwardRefExoticComponent<Pick<IonButton, "disabled" | "strong" | "color" | "size" | "fill" | "mode" | "href" | "routerAnimation" | "rel" | ... 7 more ... | "type"> & { ...; } & Pick<...> & IonicReactProps & RefAttributes<...>> & { ...; } & { ...; }'.  TS2322

    186 |                             <ButtonWithLoading
  > 187 |                                 onClick={connectHandler}
        |                                 ^
    188 |                                 isLoading={isLoading}
    189 |                             >

What am I missing?

2

I believe you need to use React.ComponentProps. This should work:

import { IonButton, IonSpinner } from "@ionic/react";

type Props = React.ComponentProps<typeof IonButton> & {
    isLoading?: boolean;
};

const ButtonWithLoading: React.FC<Props> = ({ isLoading, children, ...props }) => {
    return (
        <IonButton
            disabled={isLoading}
            {...props}
        >
            {isLoading ? <IonSpinner /> : children}
        </IonButton>
    );
};

export default ButtonWithLoading;
2 Likes