React Lazy List

Awesome react list, lazy renders only the visible rows. The component is not production ready, working on documentation.

Goal

A list that be performant with 10^6 lines rendered, flexible line height, easy customizable (themes and render hooks). Supports tabs as iPhone contact list.

TODO:

• [ ] write api documentation and examples before any code
• [ ] render only visible rows, with option to control buffer size
• [ ] create a theming schema
• [ ] complete documentation
• [ ] everything is customisable, and has a prop hook
• [ ] horizontal list
• [ ] support for infinite scroll (skip/limit), and pagination?
• [ ] use flow
• [ ] test coverage

Props

Basics

key

key: String

Select what attribute to be used as key. It defaults to id, if no id attribute on data, it will use render index. Other options are:

• bufferIndex, this is from 0 - bufferSize. In this case visible elements are reused and only it's content's are changed.
• renderIndex, this can be from 0 to length of array. It is it's index in the array. In this case elements that are not out of view are re-used.
• custom attribute, set a custom attribute as key, it should be unique.

data

data: Array/Promise(Array)

It is an array or a promise that returns an array of objects containing data to be rendered.

onScroll

onScroll: (scrollTop: Number) => void

Called onScroll.

enableArrowNavigation

enableArrowNavigation?: Booleon

Weather to navigate list using arrows. Active element will have .react-lazylist__item--active class. Defaults is false.

Presentation

Methods

setScrollTop

setScrollTop(scrollTop: Number): void

Change scrollTop. When this is called, it will trigger onScroll.

CSS ClassNames index

react-lazylist

react-lazylist--isNavigationEnabled

react-lazylist--isControlled - when scrollTop is controlled thru props.

Usage

  const data = [
    {
      name: 'hello', lastName: 'world'
    }, {
      ..
    },
    ..
  ]

  const renderItem = ({ name }) => <div>{name}</div>
  const getItemHeight = ( dataItem ) => 20 

  <LazyList
    data={data}
    height={400}
    minItemHeight={50}
    getItemHeight={getItemHeight}
    renderItem={renderItem}
  />

Installation

git clone https://github.com/bogdanpetru/react-lazylist.git
cd react-lazylist
npm install
npm start
open http://localhost:3000

License

MIT