**React Virtualized** is a library of React components for 
the efficient rendering of large lists and tabular data.

Some of the available components are:

- ArrowKeyStepper
- AutoSizer
- CellMeasurer
- Collection
- ColumnSizer
- Grid
- InfiniteLoader
- List
- Masonry
- MultiGrid
- Table
- WindowScroller

# Install

You can install `react-virtualized` using npm:
```cmd
npm i react-virtualized
```

# Code

In the example below, we use the `List` component.

Each `List` component requires a `rowRenderer` method that is responsible for rendering each list item.

We can also customize the `List` component by changing the height, width, and row height. We can also add CSS styling to the `List` itself or each row separately. 




import React from 'react';
require('./style.css');

import ReactDOM from 'react-dom';
import App from './app.js';

ReactDOM.render(
  <App />, 
  document.getElementById('root')
);


import React from "react";
import { List } from "react-virtualized";
import "style.css";

// List data as an array of strings
const list = ["Apple", "Banana", "Orange", "Kiwi", "Peach", "Pear", "Grape"];

function rowRenderer({
  key, // Unique key within array of rows
  index, // Index of row within collection
  isScrolling, // The List is currently being scrolled
  isVisible, // This row is visible within the List (eg it is not an overscanned row)
  style // Style object to be applied to row (to position it)
}) {
  return (
    <div key={key} style={style} className="row">
      {list[index]}
    </div>
  );
}

export default function App() {
  return (
    <List
      width={200}   // Width of the list
      height={100}  // Height of the list
      rowCount={list.length}  // Number of rows in list
      rowHeight={20}    // Each row height 
      rowRenderer={rowRenderer}   // Function responsible for rendering a row
      className="List"  // Adding css
    />
  );
}


.List {
  width: 100%;
  border: 1px solid #DDD;
  margin-top: 15px;
}

.row {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 25px;
  background-color: #fff;
  border-top: 1px solid #e9dbdb;
}

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

GoJS React

Typescript React

Vue.js

> The documentation for all available components, along with examples, is available [here](https://github.com/bvaughn/react-virtualized/blob/master/docs/README.md).

What is React Virtualized?

Efficient React library for rendering large lists and data tables. Offers customizable components for optimal performance.