react-virtual-list

A tiny virtualization list component, supports dynamic height.

Attention: On iOS UIWebViews, scroll events are not fired while scrolling is taking place; they are only fired after the scrolling has completed. See more

Install

Using npm or yarn:

// npm
npm install @dwqs/react-virtual-list --save

// yarn
yarn add @dwqs/react-virtual-list

Basic usage

import React, { Component } from 'react'
import VirtualizedList from '@dwqs/react-virtual-list'

export default class Hello extends Component {
  constructor (props) {
    super(props)
    this.data = [{
      id: 1,
      val: Math.random()
    }, {
      id: 2,
      val: Math.random()
    }, {
      id: 3,
      val: Math.random()
    }, ...]

    this.renderItem = this.renderItem.bind(this)
  }

  renderItem ({index, isScrolling}) {
    const item = this.data[index]
    return (
      <div>#{index}, {item.val}</div>
    )
  }

  render () {
    return (
      <VirtualizedList
        itemCount={this.data.length}
        estimatedItemHeight={20}
        renderItem={this.renderItem}
      />
    )
  }
}

Check out the online demo here

Prop Types

Property	Type	Default	Required?	Description
itemCount	Number		✓	The number of items you want to render
renderItem	Function		✓	Responsible for rendering an item given its index and itself: `({index: number, isScrolling: boolean}):React.PropTypes.node`
overscanCount	Number	5		Number of extra buffer items to render above/below the visible items. Tweaking this can help reduce scroll flickering on certain browsers/devices
estimatedItemHeight	Number	175		The estimated height of the list item element, which is used to estimate the total height of the list before all of its items have actually been measured
className	String	''		Class names of the wrapper element
onScroll	Function	() => {}		Callback invoked whenever the scroll offset changes within the inner scrollable region: `({scrollTop: number}):void`
loadMoreItems	Function	() => {}		Used to infinite scroll. Callback to be invoked when more items must be loaded
onLoading	Function	() => null		Used to infinite scroll. The component will show when loading next page data
onEnded	Function	() => null		Used to infinite scroll. The component will show when no more data to load
hasMore	Boolean	false		Used to infinite scroll. Whether has more data to load
height	Number	undefined		Height of the wrapper element. If `useWindow` is `false` and `scrollableTarget` is undefined, the wrapper element will be the scrollable target
useWindow	Boolean	true		Whether to set the `window` to scrollable target
scrollableTarget	String	undefined		Set the scrollable target, whose value is used to `document.getElementById`. `window` is the default scrollable target, so if you want to change it, you need to set `useWindow` to `false` and dont set the `height` prop
noContentRenderer	Function	() => null		Callback used to render placeholder content when `itemCount` is 0

Development

git clone git@github.com:dwqs/react-virtual-list.git

cd react-virtual-list

npm i 

npm run dev

LICENSE

This repo is released under the MIT