TinyList

Installation

npm install @tinyhref/tiny-list
or
yarn add @tinyhref/tiny-list

Use It

import React, { useMemo } from 'react';
import { TinyList } from '@tinyhref/tiny-list';

const generateData = (count: number) => {
  return Array.from({ length: count }, (_, index) => ({
    description: `This is the description for item ${index + 1}. It has some text to make it variable height. ${
      index % 3 === 0
        ? "This item has extra content to demonstrate variable heights in the virtualized list."
        : ""
    }`,
    id: `item-${index}`,
    title: `Item ${index + 1}`,
  }));
};

function VirtualList() {
  const data = useMemo(() => generateData(5000), []);

  return (
    <TinyList
      data={data}
      renderItem={({ item }) => {
        return (
          <div>
            <div>{item.title}</div>
            <div>{item.description}</div>
          </div>
        )
      }}
      virtualListProps={{
        isCssVar: true,
        itemSpace: 24,
        itemBufferRow: 10,
        activeIndex: 5
      }}
    />
  )
}