0.2.2 • Published 1 year ago
react-vlist v0.2.2
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
Installation
npm install react-vlist
Configuration
This is an example with a minimal use of the VirtualList component
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 (
<div className="app-container">
<h1>Virtual List</h1>
<VirtualList
className="list"
data={data}
itemheight={50}
renderItems={(item, index, style) => (
<div className="itemRenderer" key={index} style={style}>
<img
className="itemImage"
src="https://i.stack.imgur.com/4QkvN.jpg?s=64&g=1"
/>
<div className="itemTitleContainer">
<div className="itemTitle">{item.name}</div>
<div className="itemContent">{item.name}</div>
</div>
</div>
)}
/>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
So the first thing is to create some data
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.
<VirtualList
className="list"
data={data}
itemheight={50}
renderItems={(item, index, style) => (
<div className="itemRenderer" key={index} style={style}>
<img
className="itemImage"
src="https://i.stack.imgur.com/4QkvN.jpg?s=64&g=1"
/>
<div className="itemTitleContainer">
<div className="itemTitle">{item.name}</div>
<div className="itemContent">{item.name}</div>
</div>
</div>
)}
/>
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)
- The function recive the following params:
Other Free Apps we have created:
- Profile Me - Creates Professional Profile pictures.
- Background RM - Remove pictures Background.
- MetersApp - Create Quotes using measures from floorplan.