https://github.com/guiqui/react-virtual-list
A react List component with virtual rendering
https://github.com/guiqui/react-virtual-list
Last synced: 6 months ago
JSON representation
A react List component with virtual rendering
- Host: GitHub
- URL: https://github.com/guiqui/react-virtual-list
- Owner: guiqui
- License: mit
- Created: 2018-09-04T06:42:51.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-10-25T14:07:02.000Z (almost 2 years ago)
- Last Synced: 2025-03-20T12:45:15.912Z (7 months ago)
- Language: JavaScript
- Size: 557 KB
- Stars: 19
- Watchers: 4
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-virtual-list
[](http://npm.im/react-vlist)
[](http://opensource.org/licenses/MIT)
[](https://travis-ci.org/guiqui/react-virtual-list)
[](https://codecov.io/gh/guiqui/react-virtual-list)
[](https://www.codacy.com/app/gquiman/react-virtual-list?utm_source=github.com&utm_medium=referral&utm_content=guiqui/react-virtual-list&utm_campaign=Badge_Grade)
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
[](https://www.k8studio.io)
[](https://www.buymeacoffee.com/gquiman)
- Super fast. 😛
- Responsive Components!
- Easy to use.
- Easy to Customize with Item Renderers.
- Support thousand of records.
## Demo
Check out a working demo [here](https://guiqui.github.io/react-virtual-list/index.html)
## Some Demo Code
- [](https://codesandbox.io/s/5xnwjvjxwx) Simple Demo.
- [](https://codesandbox.io/s/pj5jpm577) 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 (
Virtual List
(
{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
(
{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)
## Other Free Apps we have created:
- [Profile Me](https://profile.softcloud.pro/) - Creates Professional Profile pictures.
- [Background RM](https://rmbackground.softcloud.pro/) - Remove pictures Background.
- [MetersApp](https://app.meters.app/login) - Create Quotes using measures from floorplan.