react-window spacing between items list

Question

I am trying to integrate react-window with react-window-infinite-loader and so far, I have been successful, but facing an issue where I couldn't find a way to style my list item to create more spacing between the list item.

Here is my code below

export default function AutoComplete({}: AutoCompleteProps) {
  //testdata length is 35000
  const LOADING = 1;
  const LOADED = 2;

  const isItemLoaded = (index) => testData[index]?.loading === LOADED;
  const loadMoreItems = (startIndex, stopIndex) => {
    for (let index = startIndex; index <= stopIndex; index++) {
      testData[index].loading = LOADING;
    }
    return new Promise<void>((resolve) =>
      setTimeout(() => {
        for (let index = startIndex; index <= stopIndex; index++) {
          testData[index].loading = LOADED;
        }
        resolve();
      }, 2500)
    );
  };
  const Row = ({ index, style }) => {
    let label;
    if (testData[index].loading === LOADED) {
      label = `${testData[index].title}`;
    } else {
      label = "Loading...";
    }
    const listStyle = { ...style };
    return (
      <div
        className={`whitespace-nowrap overflow-hidden text-ellipsis`}
        style={style}
      >
        <div>{label}</div>
      </div>
    );
  };

  return (
    <InfiniteLoader
      isItemLoaded={isItemLoaded}
      itemCount={testData.length}
      loadMoreItems={loadMoreItems}
    >
      {({ onItemsRendered, ref }) => (
        <List
          style={{ position: "absolute", width: "100%", marginTop: 50 }}
          className="absolute top-[110%] z-50 bg-white w-full"
          height={250 - 40}
          itemCount={testData.length}
          itemSize={30}
          width={300}
          onItemsRendered={onItemsRendered}
          ref={ref}
        >
          {({ index, style }) => <Row index={index} style={style} />}
        </List>
      )}
    </InfiniteLoader>
  );
}

The output is shared as you can see the list items are very close to each other and I need to add some padding maybe to make it look cleaner.

Answer 1

Increasing the value of <List></List>'s height prop and proportionately increasing the value of the itemSize prop will solve the problem. Here's a sandbox for your reference: https://codesandbox.io/s/cold-glade-hcgy8q?file=/src/App.js

Also, you can read about the props mentioned in the docs here: https://react-window.vercel.app/#/api/FixedSizeList

Good luck!

Answer 2

Here is codesandbox repo with the desired fixes. the issue was due to the style props you were passing.

that style props was adding these styles I overwrote this with did some minor changes in List and ListItem class

you can change margin as feel will look good now.