vist

Virtual-list component build with react and rxjs

Selling Point

Vist won't create or remove any DOM when you scroll the list, it will reuse the existing DOM and only change their position and data. But when you resize your window, you'll find the DOM's number is changed, so your virtual list will always have just right number of DOM.

Install

npm install --save vist

Usage

import React from 'react';
import { VirtualList } from 'vist';

class App extends Component {
  constructor(props) {
    super(props);

    const data = new Array(5000).fill(0).map((_, i) => i);

    this.state = {
      data: of(data)
    };
  }

  render() {
    return (
      <VirtualList
        data$={this.state.data}
        options$={of({ height: 60 })}
        style={{ height: 400, border: '1px solid black' }}>
        {(item, index) => (
          <p style={{ height: 59, margin: 0, borderBottom: '1px solid green' }}>
            No. {index} - {item}
          </p>
        )}
      </VirtualList>
    );
  }
}

Props

IVirtualListOptions

License

MIT © musicq