Framework7 React typings, how to extend

Questions
1

ref props are missing on the components in the typing files. I’ve logged an issue.

Is there a way to extend the definitions in the meantime?

As an example, I want to add a resize hook that implements ResizeObserver to CardHeader. There are no ref props added to the typings files and I get the error Property ‘ref’ does not exist on type ‘IntrinsicAttributes & CardHeaderProps & { children?: ReactNode; }’

If I add the ref to the typings file and I run the code the ref properly resolves and I can get access to the underlying div element. The documentation also has an example of using refs for Photo Browser but the example gives the same issue as ref is also not exposed on the Photo Browser component in its typing file.

Currently I do this:
const CardHeader2: any = CardHeader; // typescript warning disappears but I lose intellisense.

So how can I add the ref property to the definiton via extension?

2

So I’ve come up with this solution which is halfway there:

I created a file wherein import CardHeader and re-export it:

import { CardHeader as CardHeaderToExtend } from 'framework7-react';

export const CardHeader: React.FunctionComponent<{
    slot?: string;
    id?: string | number;
    className?: string;
    style?: React.CSSProperties;
    color?: string;
    colorTheme?: string;
    textColor?: string;
    bgColor?: string;
    borderColor?: string;
    rippleColor?: string;
    themeDark?: boolean;
    ref: any
}> = CardHeaderToExtend;

This works but I can foresee maintenance issues going forward with this approach as I am not really extending but copy and pasting.

3

So I found a solution using HOC and this article: https://medium.com/@jrwebdev/react-higher-order-component-patterns-in-typescript-42278f7590fb

interface IWithExtendedProps {
    ref: any,
    children?: any,
    rest?: { [props: string]: any }
}

const WithExtendedProps = <P extends object>(Component: React.FunctionComponent<P>): React.FunctionComponent<P & IWithExtendedProps> => {

    return (props: IWithExtendedProps) => {

        const { children, rest, ref } = props;

        return (
            <Component ref={ref} {...rest as P}>
                {children}
            </Component>
        );

    }
}