react-virtualized-listview

A simple virtualized listview inspired by react-virtualized

Getting started

The first step is to add react-virtualized-listview into your project.

$ npm install --save react-virtualized-listview

Note: This library is not dependent on react-virtualized which is a separate and highly customizable virtualized list library.

Usage

Import the package into your project using the import statement

import List from 'react-virtualized-listview';

Example

const data = [{
  number: 1,
  height: 40
}, {
  number: 2,
  height: 40
},{
  number: 3,
  height: 40
}, {
  number: 4,
  height: 40
}, {
  number: 5,
  height: 40
}];

<List
  source={data}
  renderItem={({ index, style }) => (
    <div key={index} style={style}>
      Hello {index}
    </div>
  )}
/>

API

renderItem

The renderItem function signature is as follows

({
  index, // The index of each item in the source prop
  style // The style that is applied to the row item
}) => <RowItem key={index} index={index} style={style}/>

Note: Passing the style prop and applying in the root element of the row item is required

Features planned for next release

• Expose internal components using default CSS classnames, custom classname injection and refs
• Add scroll persistence so that the scroll position persists between route changes

Contributing

To contribute, follow one of the two options:

• Open an Issue

  Open an issue detailing:

  1. What the issue is
  2. Steps to reproduce
  3. Possible solutions

  Note: These details are recommended but are entirely optional.

• Send a Pull Request

  Fork this project and send a pull request to the master branch.

License

MIT