Skip to content

dwqs/react-virtual-list

Repository files navigation

npm-version license js-standard-style travis-ci

README 中文

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