React Reference > LazyList Component

<LazyList />

Using this component a list with millions of items can be rendered without a drop in performance. It does that by “lazily” loading elements into the DOM when they come into view and removing items from the DOM when they are not visible.

Usage 

renderRow(index) {
    return (
      <ListItem key={index}>
        {'Item ' + (index + 1)}
      </ListItem>
    );
  }

  render() {
    return (
      <Page renderToolbar={() => <MyToolbar title='LazyList' />} >
        <div style={{height: 100}}>
          <LazyList
            length={1000}
            renderRow={() =>
              <ListItem key={index}>
                {'Item ' + (index + 1)}
              </ListItem>
            }
            calculateItemHeight={() => 44}
          />
        </div>
      </Page>
    );
  }
}

Props

[improve this]
Name Type Description
modifier string The appearance of the lazy list. Optional.
length number The length of the list. Required.
renderRow func A function given the index of the to display row, renders it. Required.
calculateItemHeight func A function given the index of the to row, returns the height of it. Required.

Need Help?

If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.

For bug reports and feature requests use our GitHub Issues page.