react-virtualist

💀🚟 Just a dead-simple react library to render big list (~1M) by rendering only visible elements (with a few offset of course)

Pros

Render only if needed & visible
Few dependencies (only react and prop-types)
Dead-simple (see KISS principle)
Self-contained (no alteration on parent)
Scroll attached to body
Valid wrapper component height
No problems if header or footer
"Fast" update (check complex example with 1M items re-rendered every 100ms, and try to scroll)
Configurable offset
Compatible with placeholder

Cons

Only horizontal
Only body scroll
Fixed item height

Example

Tips: use a parent when rendering your item, specific item style can alter your component style & behavior

Simple

import React, {Component} from 'react'
import VirtuaList from 'react-virtualist'

class Simple extends Component {
  render(){
    return (
      <div>
        <h1 style={{height: '200vh', background: 'green'}}>Header</h1>
        <VirtuaList
          height={100}
          items={[
            'Henry Fonda',
            'Lee J. Cobb',
            'Martin Balsam',
            'Jack Klugman',
            'Ed Begley',
            'John Fiedler',
            'E. G. Marshall',
            'Jack Warden',
            'Joseph Sweeney',
            'Robert Webb',
            'Jiri Voskovec',
            'Ed Binns',
            'Rudy Bond',
            'Billy Nelson'
          ]}
          render={(actor, index, style) => {
            return (
              <div key={index} style={Object.assign({ background: 'red' }, style)}>
                <p>Hello #{actor}</p>
              </div>
            )
          }}
        />
        <h1 style={{height: '200vh', background: 'blue'}}>Footer</h1>
      </div>
    )
  }
}

Complex

Usage with placeholders, prefer simple variable for items (string or number), object are complex to compare and so the library feature of render only if visible will not work

import React, {Component} from 'react'
import VirtuaList from 'react-virtualist'

class Complex extends Component {
  constructor(props){
    super(props)

    this.state = {
      videos: [
        'FKkhLWjN_I4',
        'J3sq8tculJM',
        '0U_g1z1CeqU',
        '405EwMgtlyg',
        'FmUDe7P0fzg',
        'ENMrJoEwO4Q',
        'QDdSSQpua_g',
        '8Ri-sT8DVeg',
        'v-e7p_IG0nY',
        'eUw9aolPlog',
        'LtrUSZ-Kcns'
      ],
      total: 1000000 // suppose we're currently fetching others and we want placeholders for empty
    }
  }

  componentDidMount(){
    // suppose we're currently fetching others and we want placeholders for empty
    const videos = this.state.videos
    const interval = setInterval(() => {
      videos.push(Math.random().toString(36).substr(2, 11))

      if (videos.length > this.state.total) {
        clearInterval(interval)
      }

      this.setState(videos)
    }, 100)
  }

  render(){
    return (
      <VirtuaList
        height={20}
        items={[].concat(this.state.videos, Array(this.state.total - this.state.videos.length).fill(null))}
        render={(id, row, style) => {
          return (
            <div key={row} style={Object.assign({ width: '100%' }, style)}>
              { id ? <a href={ 'https://youtu.be/' + id }>{ id }</a> : <p>Fetching...</p> }
            </div>
          )
        }}
        offset={5}
        style={{
          width: '100%'
        }}
      />
    )
  }
}

Build

Commit anything before running theses commands, then:

npm run build
npm version x.x.x
git push
git push --tags
npm publish

Thanks

Build with nwb

thcolin/react-virtualist