Giter VIP home page Giter VIP logo

vist's Introduction

vist

Virtual-list component build with react and rxjs

NPM

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

Property Type Description
data$ Observable<any> Data source of the list.
options$ Observable<IVirtualListOptions> Options of the virtual list.
style any Style of VirtualList container.

IVirtualListOptions

Property Type Default Description
height number NOT NULL Item height, it's necessary, vist use this property to calculate how many rows should be rendered actually.
spare number 3 Spare rows out of the view.
sticky boolean true Whether the scrollTop need to stick to the container's top when the data is changed or not.
startIndex number 0 To indicate this start index of the list, and the list will scroll to this start index position when mounted.
resize boolean true To mark if the real dom number should be recomputed when the window resize.

License

MIT © musicq

vist's People

Contributors

musicq avatar

Watchers

James Cloos avatar Seeker avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.