@dotconnor/grommet
Version:
focus on the essential experience
100 lines (72 loc) • 2.74 kB
Markdown
## InfiniteScroll
A container that lazily renders items.
[](https://storybook.grommet.io/?selectedKind=Utilities-InfiniteScroll&full=0&stories=1&panelRight=0) [](https://codesandbox.io/s/github/grommet/grommet-sandbox?initialpath=/infinitescroll&module=%2Fsrc%2FInfiniteScroll.js)
## Usage
```javascript
import { InfiniteScroll } from 'grommet';
<InfiniteScroll />
```
## Properties
**children**
Function that will be called when each item is rendered. 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. For example:
{(item, index, ref) => <li key={index} ref={ref}>{item}</li>}
```
function
```
**items**
The children callback will be called to render each item.
```
[any]
```
**onMore**
Use this to indicate that 'items' doesn't contain all that it could.
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.
```
function
```
**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. It will be called with a single element that should
be wrapped appropriately. This is needed when the default
element, a <span>, isn't sufficient, such as a row of a table body.
```
function
```
**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
```
**scrollableAncestor**
A custom ancestor to determine if the marker is visible in it.
This is useful in cases where you do not want the immediate
scrollable ancestor to be the container. For example, when your
marker is in a div that has overflow auto but you are detecting
visibility based on the window.
This should typically be a reference to a DOM node, but it will
also work to pass it the string "window" if you are using server
rendering.
```
node
window
```
**show**
Ensure that the item at this index is visible initially.
```
number
```
**step**
How many items to render at a time. Defaults to `50`.
```
number
```