react-virtual-list


This is a list component that support viartualize rendering.
It can be easly customize by providing its own item renderer.


- Super fast. 😛
- Responsive Components!
- Easy to use.
- Easy to Customize with Item Renderers.
- Support thousand of records.

Demo

Check out a working demo here

Some Demo Code

-  Simple Demo.
-  Demo with select Item,highlight selected and on click handler.

Installation

``javascript
npm install react-vlist
`

Configuration

This is an example with a minimal use of the VirtualList component
`javascript
import React from "react";
import ReactDOM from "react-dom";
import VirtualList from "react-vlist";
import "./Application.css";

const data = [{ name: "hola" }];
for (let i = 0; i < 1000; i++) {
data.push({ name: Row ${i} });
}
function App() {
return (


);
}

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);
`

So the first thing is to create some data
`javascript
const data = [{ name: "hola" }];
for (let i = 0; i < 1000; i++) {
data.push({ name: Row ${i} });
}
`
The next thing we implement a render method that use the list.

`javascript
className="list"
data={data}
itemheight={50}
renderItems={(item, index, style) => (



)}
/>
``

The list recive 3 params:
- data: Data is an array of elements to be render by the list
- itemheight: is the height of each item of the list
- renderItems: It is a hight order function where you can set what component is to be use to render the list elements.
* The function recive the following params:
* item:A element from the data object.
* index:The cardinal order of the element, it positio in the data array.
* style:The style to be applied to position the element.
* This function returns:
* A react component.(Make sure you assign the style to the returning component so it get position properly)

Other Free Apps we have created:

- Profile Me - Creates Professional Profile pictures.
- Background RM - Remove pictures Background.
- MetersApp - Create Quotes using measures from floorplan.