Infer type of 2nd positional parameter in itemContent callback

[bb]

Hi Petyo,

thanks for creating react-virtuoso. It works really great for me.

I just upgraded to 1.0 and wanted to try the new data parameter in itemContent and noticed it was typed any instead of the inferable type from <Virtuoso data={...} ... prop.

I think it can be added like this:

export interface VirtuosoProps<ItemType extends any> extends Omit<ListProps, 'groupCounts' | 'groupContent'> {
...
  data?: ItemType[]
...
  itemContent?: (index: number, data?: ItemType) => ReactNode
...

export interface GroupedVirtuosoProps<ItemType extends any>
  extends Omit<VirtuosoProps<ItemType>, 'totalCount' | 'itemContent'>,
...

However, I don't know to parameterize the export const lines at the very end of components.tsx, yet. Maybe you do? If you have a pointer how to fix that, I might be able to provide a PR.

[petyosi]

@bb - Me neither, TBH. I googled several "generic React components" phrases, but nothing seems to make sense.

[bb]

Thanks for the quick reply! I don't have the time to investigate deeper right now, but I'll give it another try later. Or maybe somebody else chimes in. 😉

[bb]

For Future-Me or whoever implements that: I just noticed that this would ideally also apply to data property of Item and RecordItem as well as ItemContent and GroupItemContent (defined in interfaces.ts). This would help e.g. in itemsRendered.

[petyosi]

I don't think (but I might be wrong) that you have to interfere with interfaces.ts. The "official" typings of the component are re-declared in components.ts for documentation purposes. While they do extend some interfaces from interfaces.ts, this is mostly to avoid duplication.

[seahorsepip]

I had a try at adding generic typing to the Virtuoso and GroupedVirtuoso components in the PR above.

[github-actions[bot]]

:tada: This issue has been resolved in version 1.1.3 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: