react-virtual-list-sunsetik

A highly performant virtualized list component for rendering large datasets efficiently in React. This library provides both horizontal and vertical virtualization to improve rendering performance by only displaying visible items.

Features

• Horizontal and Vertical Virtualization: Efficiently render large lists or grids by only rendering visible items.
• Dynamic Size Support: Handle dynamic row and column sizes based on content.
• Responsive: Automatically adjusts to the size of the container.

Installation

To use react-virtual-list-sunsetik, install it via npm:

1npm install react-virtual-list-sunsetik

Vertical scroll Usage Here's a simple example of using the library to create a virtualized list:

1import React from "react";
2import { useDynamicSizeGrid } from 'react-virtual-list-sunsetiklovers'
3import {
4  useCallback,
5  useRef,
6  useState,
7} from "react";
8
9const containerHeight = 600;
10const gridSize = 100
11
12const createItems = () =>
13  Array.from({ length: gridSize }, () => ({
14    id: Math.random().toString(36).slice(2),
15    text: Math.random().toString(36).slice(2),
16  }));
17
18export function Grid() {
19  const [listItems, setListItems] = useState(createItems);
20  const scrollElementRef = useRef<HTMLDivElement>(null);
21
22  const { virtualRows, totalHeight, measureRowHeight } = useDynamicSizeGrid({
23    estimateColumnWidth: useCallback(() => 16, []),
24    rowHeight: useCallback(() => 16, []),
25    rowsCount: listItems.length,
26    getScrollElement: useCallback(() => scrollElementRef.current, []),
27    getRowKey: useCallback((index) => listItems[index]!.id, [listItems]),
28    columnsCount: 0,
29    getColumnKey: useCallback((index) => index, []),
30  });
31
32  return (
33    <div style={{ padding: "0 12px" }}>
34      <h1>List</h1>
35      <div style={{ marginBottom: 12 }}>
36        <button
37          onClick={() => setListItems((items) => items.slice().reverse())}
38        >
39          reverse
40        </button>
41      </div>
42      <div
43        ref={scrollElementRef}
44        style={{
45          height: containerHeight,
46          overflow: "auto",
47          border: "1px solid lightgrey",
48          position: "relative",
49        }}
50      >
51        <div style={{ height: totalHeight }}>
52          {virtualRows.map((virtualItem) => {
53            const item = listItems[virtualItem.index]!;
54
55            return (
56              <div
57                key={item.id}
58                data-row-index={virtualItem.index}
59                ref={measureRowHeight}
60                style={{
61                  position: "absolute",
62                  top: 0,
63                  transform: `translateY(${virtualItem.offsetTop}px)`,
64                  padding: "6px 12px",
65                }}
66              >
67                {virtualItem.index} {item.id}
68              </div>
69            );
70          })}
71        </div>
72      </div>
73    </div>
74  );
75}

Grid Usage For a grid layout, you can use the following example:

1import { useDynamicSizeGrid } from 'react-virtual-list-sunsetiklovers';
2import { useCallback, useRef, useState } from "react";
3
4const containerHeight = 600;
5const gridSize = 100;
6
7const createItems = () =>
8  Array.from({ length: gridSize }, (_) => ({
9    id: Math.random().toString(36).slice(2),
10    columns: Array.from({ length: gridSize }, () => ({
11      id: Math.random().toString(36).slice(2),
12      text: 'You can paste a faker',
13    })),
14  }));
15
16export function Grid() {
17  const [gridItems, setGridItems] = useState(createItems);
18  const scrollElementRef = useRef<HTMLDivElement>(null);
19
20  const {
21    virtualRows,
22    totalHeight,
23    measureColumnWidth,
24    totalWidth,
25    virtualColumns,
26  } = useDynamicSizeGrid({
27    rowHeight: useCallback(() => 30, []),
28    rowsCount: gridSize,
29    columnsCount: gridSize,
30    estimateColumnWidth: useCallback(() => 100, []),
31    getColumnKey: useCallback((index) => index, []),
32    getScrollElement: useCallback(() => scrollElementRef.current, []),
33    getRowKey: useCallback((index) => gridItems[index].id, [gridItems]),
34  });
35
36  const reverseGrid = () => {
37    setGridItems((items) =>
38      items.map((item) => ({
39        ...item,
40        columns: item.columns.slice().reverse(),
41      })).reverse()
42    );
43  };
44
45  return (
46    <div style={{ padding: "0 12px" }}>
47      <h1>Grid</h1>
48      <div style={{ marginBottom: 12 }}>
49        <button onClick={reverseGrid}>Reverse</button>
50      </div>
51      <div
52        ref={scrollElementRef}
53        style={{
54          height: containerHeight,
55          overflow: "auto",
56          border: "1px solid lightgrey",
57          position: "relative",
58        }}
59      >
60        <div style={{ height: totalHeight, width: totalWidth }}>
61          {virtualRows.map((virtualRow) => {
62            const item = gridItems[virtualRow.index]!;
63
64            return (
65              <div
66                key={item.id}
67                style={{
68                  position: "absolute",
69                  top: 0,
70                  transform: `translateY(${virtualRow.offsetTop}px)`,
71                  padding: "6px 12px",
72                  height: virtualRow.height,
73                }}
74              >
75                {virtualColumns.map((virtualColumn) => {
76                  const item = gridItems[virtualRow.index]?.columns[virtualColumn.index];
77                  return (
78                    <div
79                      data-row-index={virtualRow.index}
80                      data-column-index={virtualColumn.index}
81                      ref={measureColumnWidth}
82                      style={{
83                        position: "absolute",
84                        left: virtualColumn.offsetLeft,
85                        whiteSpace: "nowrap",
86                      }}
87                      key={virtualColumn.key}
88                    >
89                      {item?.text}
90                    </div>
91                  );
92                })}
93              </div>
94            );
95          })}
96        </div>
97      </div>
98    </div>
99  );
100}

Props

UseDynamicSizeGridProps

• rowsCount: Number - The total number of rows in the grid.
• rowHeight: Function - A function that returns the height of each row.
• estimateRowHeight: Function - A function that provides an estimated height for rows.
• getRowKey: Function - A function that returns a unique key for each row.
• columnsCount: Number - The total number of columns in the grid.
• columnWidth: Function - A function that returns the width of each column.
• estimateColumnWidth: Function - A function that provides an estimated width for columns.
• getColumnKey: Function - A function that returns a unique key for each column.
• overscanY: Number - The number of additional rows to render outside the visible area (default: 3).
• overscanX: Number - The number of additional columns to render outside the visible area (default: 1).
• scrollingDelay: Number - The delay before scrolling is considered ended (default: 150 ms).
• getScrollElement: Function - A function that returns the scrollable element.