Generic Component with forwarded ref. #106
Description
Hello everyone,
today I stumbled across the following problem:
I want to build a List Component that has a generic prop . From the outside you can pass a ref to the List, to access a scrollToItem(item: TItem). Since I want to use hooks, I need to use React.forwardRef, which does not allow to return a generic function.
This is my attempt of solving, but I feel like there could be something less verbose and repetitive.
type ListRef<ItemType> = {
scrollToItem: (item: ItemType) => void;
};
type ListProps<ItemType> = {
items: ItemType[];
};
const List = forwardRef(function List<ItemType>(props: ListProps<ItemType>) {
useImperativeHandle<ListRef<ItemType>, ListRef<ItemType>>(ref, () => ({
scrollToItem: (item: ItemType) => undefined
}));
return null;
}) as <ItemType>(
p: ListProps<ItemType> & { ref: Ref<ListRef<ItemType>> }
) => ReactElement<any> | null;
let ref = useRef<ListRef<number>>(null);
<List items={[1, 2, 3]} ref={ref} />;