<commit_before># react-list

A versatile infinite scroll [React] component.

## Install

```bash
bower install react-list

# or

npm install react-list
```

`react-list` depends on React **with addons**. `react-list` leverages the
[PureRenderMixin] to make updates more efficient.

## Components

### `reactList.List`

#### itemRenderer(index, key)

A function that receives an index and a key and returns the content to be
rendered for the item at that index.

#### itemsRenderer(items, ref)

A function that receives the rendered items and a ref. By default this element
is just a `<div>`. Generally it only needs to be overriden for use in a
`<table>` or other special case. **NOTE: You must set ref={ref} on the component
that contains the `items` so the correct item sizing calculations can be made.**

#### length

The number of items in the list.

#### pageSize (defaults to `10`)

The number of items to batch up for new renders.

#### threshold (defaults to `500`)

The number of pixels to ensure the list is buffered with.

### `reactList.UniformList`

`UniformList` has the same properties as `List`, but `pageSize` is calculated
automatically. It also supports two more optional properties.

#### itemHeight (defaults to automatic calculation)

While not necessary, providing the exact rendered height of each item can
improve performance. If not provided, the height of the first rendered element
will be used to assume the height of all items.

#### itemsPerRow (defaults to automatic calculation)

Similar to `itemHeight`, providing the number of items that render per row of
items (columns) can improve performance. This is also not required and if not
provided will be calculated by counting the number of rendered items in the
first row.

**NOTE: `itemHeight` and `itemsPerRow` should always both be defined or both not
be defined. If one is defined but not the other, the automatic calculation will
take over.**

## Examples

Check out [the test file] for examples of both the `List` and `UniformList`
components.

[React]: https://github.com/facebook/react
[PureRenderMixin]: https://facebook.github.io/react/docs/pure-render-mixin.html
[the test file]: https://orgsync.github.io/react-list/
<commit_msg>Close #14 Add more information to README<commit_after># react-list

A versatile infinite scroll [React] component.

## Install

```bash
bower install react-list

# or

npm install react-list
```

`react-list` depends on React **with addons**. `react-list` leverages the
[PureRenderMixin] to make updates more efficient.

## Examples

Check out [the test page] (and the [the test page source]) for examples of both
the `List` and `UniformList` components in action.

Here's another simple example to get you started.

```js
import React from 'react';
import {UniformList} from 'react-list';
import loadAccount from 'my-account-loader';

class MyComponent extends React.Component {
  state = {
    accounts: []
  };

  componentWillMount() {
    loadAccounts(this.handleAccounts.bind(this));
  }

  handleAccounts(accounts) {
    this.setState({accounts});
  }

  renderItem(index, key) {
    return <div key={key}>{this.state.accounts[index].name}</div>;
  }

  render() {
    return (
      <div>
        <h1>Accounts</h1>
        <div
          style={{
            position: 'relative',
            overflow: 'auto',
            maxHeight: 400
          }}
        >
          <UniformList
            itemRenderer={this.renderItem}
            length={this.state.accounts.length}
          />
        </div>
      </div>
    );
  }
}
```

## API

### `reactList.List`

The `List` component is best used when rendering items of variable heights. This
component will only attempt to draw elements once they are above the fold or
near it.

#### Props

##### itemRenderer(index, key)

A function that receives an index and a key and returns the content to be
rendered for the item at that index.

##### itemsRenderer(items, ref)

A function that receives the rendered items and a ref. By default this element
is just a `<div>`. Generally it only needs to be overriden for use in a
`<table>` or other special case. **NOTE: You must set ref={ref} on the component
that contains the `items` so the correct item sizing calculations can be made.**

##### length

The number of items in the list.

##### pageSize (defaults to `10`)

The number of items to batch up for new renders.

##### threshold (defaults to `500`)

The number of pixels to ensure the list is buffered with.

---

### `reactList.UniformList`

The `UniformList` component is preferred when you can guarantee all of your
elements will be the same height. The advantage here is that the height of the
entire list can be calculated ahead of time and only enough items to fill the
viewport ever need to be drawn.

`UniformList` has the same properties as `List`, but `pageSize` is calculated
automatically. It also supports two more optional properties.

#### Props

##### itemHeight (defaults to automatic calculation)

While not necessary, providing the exact rendered height of each item can
improve performance. If not provided, the height of the first rendered element
will be used to assume the height of all items.

##### itemsPerRow (defaults to automatic calculation)

Similar to `itemHeight`, providing the number of items that render per row of
items (columns) can improve performance. This is also not required and if not
provided will be calculated by counting the number of rendered items in the
first row.

**NOTE: `itemHeight` and `itemsPerRow` should always both be defined or both not
be defined. If one is defined but not the other, the automatic calculation will
take over.**

#### Methods

##### scrollTo(index)

Scroll the viewport so that the element at index `index` is visible.

[React]: https://github.com/facebook/react
[PureRenderMixin]: https://facebook.github.io/react/docs/pure-render-mixin.html
[the test page]: https://orgsync.github.io/react-list/
[the test page source]: index.html

{'fraction_non_alphanumeric': 0.09334889148191365, 'fraction_numerical': 0.0028338056342723785, 'mean_word_length': 3.914004914004914, 'pattern_counts': {'":': 0, '<': 16, '<?xml version=': 0, '>': 16, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1231596', 'n_tokens_mistral': 1668, 'n_tokens_neox': 1612, 'n_words': 781}