Skip to content

guiqui/react-virtual-list

Repository files navigation

react-virtual-list

npm MIT License Travis codecov Codacy Badge

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

alt text

Buy Me A Coffee

  • 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

  • Edit 5xnwjvjxwx Simple Demo.
  • Edit pj5jpm577 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:

About

A react List component with virtual rendering

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published