Using a forwardRef on a generic target using arrow functions

Question

Similar to Using a forwardRef component with children in TypeScript but I am looking for an example where the referenced object is also generic like react-native FlashList or FlatList

I got it to work like this

export const DragFlashList = forwardRef<FlashList<any>, DragFlashListProps<any>>((props, ref) => <DragListImpl {...props} ref={ref} />);

but I want to get rid of the any

or this doesn't work

export function DragFlashList<T>  {
    return forwardRef<FlashList<T>, DragFlashListProps<T>>((props, ref) => <DragListImpl {...props} ref={ref} />);
}

But I want it to use arrow functions.

The technique I did What is the syntax for Typescript arrow functions with generics? doesn't appear to do work correctly because forwardRef builds the function. The following isn't valid typescript

export const DragFlashList = <T,>forwardRef<FlashList<T>, DragFlashListProps<T>>((props, ref) => <DragListImpl {...props} ref={ref} />);

Dragonite · Accepted Answer · 2024-01-17 03:15:38Z

-1

try:

export const forwardRefGeneric = <P, R>(fc: (props: P, ref: ForwardedRef<R>) => JSX.Element) => {
    return forwardRef(fc) as unknown as (props: P & { ref: ForwardedRef<R> }) => JSX.Element;
}

usage:

export function DragFlashList<T>() {
    return forwardRefGeneric<FlashList<T>, DragFlashListProps<T>>((props, ref) => <DragListImpl {...props} ref={ref} />);
}

answered Jan 17, 2024 at 3:15

Dragonite

444 bronze badges

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

Collectives™ on Stack Overflow

Using a forwardRef on a generic target using arrow functions

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related