react-virtual-list

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

K8Studio.io is our Golden Sponsor

• 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

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)

Other Free Apps we have created:

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