A virtual list component with customizable item renderers
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.
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 (
Virtual List
className="list"
data={data}
itemheight={50}
renderItems={(item, index, style) => (
className="itemImage"
src="https://i.stack.imgur.com/4QkvN.jpg?s=64&g=1"
/>
{item.name}
{item.name}
)}
/>
);
}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) => (
className="itemImage"
src="https://i.stack.imgur.com/4QkvN.jpg?s=64&g=1"
/>
{item.name}
{item.name}
)}
/>
``
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)