Typescript function that wraps a component with another React Component

Question

I have a function that wraps a React component with <IntlContextProvider> component. I want to define the GenericFunctionType but I have no ideia what shoulb be.

const wrapIntl: GenericFunctionType = (ComponentToWrap)  => {
    class Wrapper extends React.PureComponent {
        render() {
            return (
                <IntlContextProvider>
                    <ComponentToWrap {...this.props}/>
                </IntlContextProvider>
            );
        }
    }
    return Wrapper;
}

This function wrapIntl will be used like this:


export const TranslateText = wrapIntl(({text}: {text: string}) =>

    <>
        {React.useContext(IntlContext).translate(text)}
    </>

)

I have this now:

interface GenericFunctionType {
    <T>(ComponentToWrap: React.ReactNode): T
}

But it has this errors:

TS2322: Type '(ComponentToWrap: ReactNode) => typeof Wrapper' is not assignable to type 'WrapIntlFunctionType'. Type 'typeof Wrapper' is not assignable to type 'T'. 'T' could be instantiated with an arbitrary type which could be unrelated to 'typeof Wrapper'.

TS2604: JSX element type 'ComponentToWrap' does not have any construct or call signatures.

Titian Cernicova-Dragomir · Accepted Answer · 2022-02-04 11:15:24Z

1

You have the right idea in making it generic. T will be the type for the props, and you can have it accept and return a React.ComponentType<T>:

interface GenericFunctionType {
    <T,>(ComponentToWrap: React.ComponentType<T>): React.ComponentType<T>
}

Playground Link

Although the explicit type for it is not really necessary, you could just specify the types on the implementation (you need to anyway because you need to use T in the Wrapper class definition):


const wrapIntl = <T,>(ComponentToWrap: React.ComponentType<T>): React.ComponentType<T> => {
    class Wrapper extends React.PureComponent<T> {
        render() {
            /// ....
        }
    }
    return Wrapper;
}

Playground Link

answered Feb 4, 2022 at 11:15

Titian Cernicova-Dragomir

253k37 gold badges465 silver badges395 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Typescript function that wraps a component with another React Component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related