InfiniteScroll

a container that lazily renders items

Props

children

Function that will be called when each item is rendered.

function

It will be called with three arguments, the item to render, the index of the item, and a ref that should be applied to the element.

{(item, index, ref) => ( <li key={index} ref={ref}> {item} </li> )}

items

The children callback will be called to render each item.

array[any]

[]

onMore

Use this to indicate that 'items' doesn't contain all that it could.

function

It will be called when the entire list of items has been rendered. This might be used when the total number of items that could be retrieved is more than you'd want to load into the browser. 'onMore' allows you to lazily fetch more from the server only when needed.

() => {}

renderMarker

Function that will be called to render the marker element that is inserted into the DOM to track when scrolling nears the end of the rendered items.

function

It will be called with a single element that should be wrapped appropriately. This is needed when the default element, a , isn't sufficient, such as a row of a table body.

() => {}

replace

Whether to replace previously rendered items with a generic spacing element when they have scrolled out of view. This is more performant but means that in-page searching will not find elements that have been replaced. In general, this should be set to true within Drop containers and false otherwise.

boolean

true

false

show

Ensure that the item at this index is visible initially.

number

step

How many items to render at a time.

number