Currently, I am attempting to define the index and style parameters passed to the Row function in TypeScript.
//https://github.com/bvaughn/react-window
import * as React from "react";
import styled from "styled-components";
import { FixedSizeList as List } from "react-window";
import AutoSizer from "react-virtualized-auto-sizer";
const StyledSection = styled.section`
width: 100vw;
height: 100vh;
background: #C0C0C0;
`;
const Row = ({ index, style }: {index: number, style: any}) => (
<div className={index % 2 ? 'ListItemOdd' : 'ListItemEven'} style={style}>
Row {index}
</div>
);
const Scroller = () => {
return (
<StyledSection>
<AutoSizer>
{({ height, width }) => {
return (
<List height={height} width={width} itemSize={20} itemCount={300}>
{Row}
</List>
);
}}
</AutoSizer>
</StyledSection>
);
};
export { Scroller };
In the above snippet, I have attempted to explicitly type the index parameter as a number while keeping the style parameter as any. However, an error stating "index is not defined" is displayed by the compiler.
const Row = ({ index, style }) => (
<div className={index % 2 ? 'ListItemOdd' : 'ListItemEven'} style={style}>
Row {index}
</div>
);
Do you have any suggestions on how to properly assign types to these two parameters? The react-window library includes its own d.ts file. You can view a functional example on CodeSandbox - https://codesandbox.io/s/infinite-scroller-52b7d?file=/src/Scroller.tsx