react-lazy-list

This is a simple and fast realization of lazy list as the react component that show entities only when user can see them. Thats why it can render very large lists and does not lose performance.

Installation

npm install --save react-lazy-list

Example

import React, { Component } from 'react'
import LazyList from 'react-lazy-list'

export default class App extends Component {
  render() {
    const onMoreHandle = () => void
    return (
      <LazyList elementHeight={ 300 } onMore={ this.onMoreHandle } >
        { entities.map(entity => (
          <Item key={ entity.id } entity={ entity } />
        )) }
        <Dummy />
      </LazyList>
    )
  }
}

props

children

Object required Entities collection to render.

elementHeight

Number required Pixels number of height of collection entity.

windowHeight

Number Custom container height in pixels, i.e. for server side rendering.

topScrollOffset

Number Offset from top of window to increase the threshold of the moment trip. Usable to make a scroll offset for header height.

bottomScrollOffset

Number Offset from top of window to decrease the threshold of the moment trip. Usable for increase value an scroll offset for header height.

onMore

Function Handler to call then list seek to end.