Docs
πŸ—οΈ ⏐ Components
Data
Infinity List

Infinity List

The Infinity List component is designed to manage large datasets by progressively displaying a subset of items, enhancing performance and user experience.

This component is especially useful in scenarios where loading the entire dataset at once is feasible, but displaying it all at once may overwhelm the user or the UI.

Quick Start

To start using the InfinityList component, import useInfinityList from the reablocks library and provide the items prop to the hook.

Examples

The basic implementation uses the InfinityList component directly. This approach is straightforward, allowing you to map over your dataset and render each item within the InfinityList component:

Component

Hook

API

Component

PropDescriptionDefault
children *The children to filter.
any
buttonClassNameCSS Classname to apply to the button.
string
sizeThe page size. Combined with the threshold, this will determine the page size.
number
10
thresholdThe fuzzy threshold to use when calculating the next page size.
number
3
nextSizeThe numer of items to show in the next page. If undefined, will use the size. If you want to show all items, pass infinity.
number

Hook