simple-virtual-list/README.md

A simple and basic React virtual list

A simple and basic React virtual list to display large amount of data efficiently.

## Installing

Using npm:

```bash
$ npm install simple-virtual-list
```

Using bower:

```bash
$ bower install simple-virtual-list
```

Using yarn:

```bash
$ yarn add simple-virtual-list
```

Using jsDelivr CDN:

```html
<script src="https://cdn.jsdelivr.net/npm/simple-virtual-list/index.js"></script>
```

Using unpkg CDN:

```html
<script src="https://unpkg.com/simple-virtual-list/index.js"></script>
```

Test it on [codesandbox](https://codesandbox.io/s/clever-hooks-99pdk1?file=/src/App.js).

## Example


```
import React from 'react';
import SimpleVirtualList from 'simple-virtual-list';
const data = [];
for (let i = 0; i < 500; i++) {
  data.push({ id: i + 1, title1: 'title - ' + (i + 1) });
}
const DemoApp = (props) => {
  return (
    <div style={{ height: '200px', width: '200px' }}>
      <SimpleVirtualList
        datasource={data} // mandatory
        rowHeight={21} // optional
        itemKey={'id'} // optional
        display={'title1'} // mandatory if there is no title key in records
        renderItem={(item) => <span>{item.title1} </span>} // optional
      />
    </div>
  );
};
export default DemoApp;

```