# clauderic/react-tiny-virtual-list

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/clauderic-react-tiny-virtual-list).**

2,488 stars · 159 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/clauderic/react-tiny-virtual-list
- Homepage: https://clauderic.github.io/react-tiny-virtual-list/
- awesome-repositories: https://awesome-repositories.com/repository/clauderic-react-tiny-virtual-list.md

## Topics

`react` `react-component` `virtual-scroll` `virtualization` `windowing`

## Description

React tiny virtual list is a zero-dependency component library that optimizes performance for extensive vertical and horizontal collections by rendering only the items currently visible in the viewport. It handles large datasets efficiently while supporting variable item dimensions and dynamic content updates at runtime.

The component supports both horizontal and vertical scroll directions, absolute positioning layouts, and dynamic offset measurements computed via fixed numbers, size arrays, or callback functions. It also provides imperative methods to programmatically scroll or jump to specific item indices with configurable alignment, tracks visibility changes through update callbacks, and maintains designated items at fixed coordinates using sticky element pinning.

## Tags

### User Interface & Experience

- [Virtual List Renderers](https://awesome-repositories.com/f/user-interface-experience/virtual-list-renderers.md) — Optimizes performance for extensive vertical and horizontal collections by rendering only visible items.
- [Windowed Rendering](https://awesome-repositories.com/f/user-interface-experience/windowed-rendering.md) — Renders only the subset of items falling within the current scroll container bounds to maintain high performance.
- [Virtualized List Rendering](https://awesome-repositories.com/f/user-interface-experience/dynamic-list-rendering/virtualized-list-rendering.md) — Renders long lists of data efficiently by only drawing items currently visible in the browser viewport.
- [Virtualized Variable-Height Items](https://awesome-repositories.com/f/user-interface-experience/measurement-tools/dynamic-size-calculators/runtime-height-calculators/dynamic-height-implementations/virtualized-variable-height-items.md) — Supports variable heights and widths to render scrolling lists with items of different dimensions efficiently.
- [Scroll Alignment Controls](https://awesome-repositories.com/f/user-interface-experience/scroll-interaction-handlers/scroll-state-controllers/scroll-alignment-controls.md) — Manages scroll offsets, programmatically jumps to specific item indices, and aligns scrolled items within the viewport. ([source](https://github.com/clauderic/react-tiny-virtual-list/blob/master/README.md))
- [Imperative Scroll Controllers](https://awesome-repositories.com/f/user-interface-experience/scroll-interaction-handlers/scroll-state-controllers/scroll-to-index-mappers/imperative-scroll-controllers.md) — Exposes programmatic methods to jump or scroll smoothly to specific item indices with configurable alignment.
- [UI Component Libraries](https://awesome-repositories.com/f/user-interface-experience/ui-component-libraries.md) — Provides a frontend component library handling large scrollable collections with variable dimensions and sticky elements.
- [Variable-Size Content Layout](https://awesome-repositories.com/f/user-interface-experience/dynamic-layout-engines/variable-size-content-layout.md) — Supports both vertical and horizontal scroll directions with fixed or variable item sizes and dynamic measurements. ([source](https://github.com/clauderic/react-tiny-virtual-list#readme))
- [Absolute Positioning](https://awesome-repositories.com/f/user-interface-experience/element-positioning/absolute-positioning.md) — Calculates precise absolute pixel offsets to position rendered list items within the scrollable viewport container.
- [Horizontal List Scrolling](https://awesome-repositories.com/f/user-interface-experience/horizontal-scrolling-utilities/horizontal-list-scrolling.md) — Scrolls and virtualizes items along a horizontal axis instead of vertically by changing layout direction. ([source](https://github.com/clauderic/react-tiny-virtual-list/blob/master/CHANGELOG.md))
- [List Dimension Queries](https://awesome-repositories.com/f/user-interface-experience/list-dimension-queries.md) — Defines container dimensions and scroll direction to handle both vertical and horizontal scrolling lists smoothly. ([source](https://github.com/clauderic/react-tiny-virtual-list/blob/master/README.md))
- [Dynamic Element Measurers](https://awesome-repositories.com/f/user-interface-experience/measurement-tools/dynamic-element-measurers.md) — Computes item positions dynamically using fixed numbers, size arrays, or custom callback functions at runtime.
- [Dynamic Item Size Calculators](https://awesome-repositories.com/f/user-interface-experience/measurement-tools/dynamic-size-calculators/dynamic-item-size-calculators.md) — Accepts fixed dimensions, size arrays, or dynamic functions alongside sticky index configurations for layouts. ([source](https://github.com/clauderic/react-tiny-virtual-list/blob/master/README.md))

### Part of an Awesome List

- [Virtualized List Components](https://awesome-repositories.com/f/awesome-lists/devtools/react-components/virtualized-list-components.md) — Implements a lightweight React component that renders only visible items in large collections during scroll.

### Software Engineering & Architecture

- [Virtualized Lists](https://awesome-repositories.com/f/software-engineering-architecture/performance-reliability/performance-optimization/data-handling-throughput/large-dataset-optimizations/virtualized-lists.md) — Virtualizes large collections by rendering only items currently visible in the viewport to maintain performance. ([source](https://github.com/clauderic/react-tiny-virtual-list#readme))