Virtual List React Component

Virtual List is not a separate React component, but just a particular case of using <List>, <ListItem> React components and special Framework7's Virtual List component.

Virutal List Properties

Prop Type Default Description
<List> properties
virtualList boolean false Enables Virtual List
virtualListParams object Object with Virtual List Parameters

Virutal List Events

Event Description
<List> events
virtualItemBeforeInsert Event will be triggered before item will be added to virtual document fragment
virtualItemsBeforeInsert Event will be triggered after current DOM list will be removed and before new document will be inserted
virtualItemsAfterInsert Event will be triggered after new document fragment with items inserted
virtualBeforeClear Event will be triggered before current DOM list will be removed and replaced with new document fragment

Access To Virtual List Instance

You can access Virtual List initialized instance by accessing .f7VirtualList <List> component's property.

Examples

Here is the full page example with Virtual List and Searchbar to search through Virtual List items:

export default class extends React.Component {
  constructor(props) {
    super(props);

    const items = [];
    for (let i = 1; i <= 10000; i += 1) {
      items.push({
        title: `Item ${i}`,
        subtitle: `Subtitle ${i}`,
      });
    }
    this.state = {
      items,
      vlData: {
        items: [],
      },
    };
  }
  searchAll(query, items) {
    const found = [];
    for (let i = 0; i < items.length; i += 1) {
      if (items[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);
    }
    return found; // return array with mathced indexes
  }
  renderExternal(vl, vlData) {
    this.setState({ vlData });
  }
  render() {
    return (
      <Page>
        <Navbar title="Virtual List" backLink="Back">
          <Subnavbar inner={false}>
            <Searchbar
              searchContainer=".virtual-list"
              searchItem="li"
              searchIn=".item-title"
            ></Searchbar>
          </Subnavbar>
        </Navbar>
        <Block>
          <p>Virtual List allows to render lists with huge amount of elements without loss of performance. And it is fully compatible with all Framework7 list components such as Search Bar, Infinite Scroll, Pull To Refresh, Swipeouts (swipe-to-delete) and Sortable.</p>
          <p>Here is the example of virtual list with 10 000 items:</p>
        </Block>
        <List className="searchbar-not-found">
          <ListItem title="Nothing found"></ListItem>
        </List>
        <List
          className="searchbar-found"
          medialList
          virtualList
          virtualListParams={{ items: this.state.items, searchAll: this.searchAll, renderExternal: this.renderExternal.bind(this), height: this.$theme.ios ? 63 : 73}}
        >
          <ul>
            {this.state.vlData.items.map((item, index) => (
              <ListItem
                key={index}
                mediaItem
                link="#"
                title={item.title}
                subtitle={item.subtitle}
                style={{top: `${this.state.vlData.topPosition}px`}}
              ></ListItem>
            ))}
          </ul>
        </List>
      </Page>
    )
  }
}