<commit_before># virtual-each
![NPM Version](https://img.shields.io/npm/v/virtual-each.svg)
[![Build Status](https://travis-ci.org/jasonmit/virtual-each.svg?branch=master)](https://travis-ci.org/jasonmit/virtual-each)
[![Dependency Status](https://david-dm.org/jasonmit/virtual-each.svg)](https://david-dm.org/jasonmit/virtual-each)
[![devDependency Status](https://david-dm.org/jasonmit/virtual-each/dev-status.svg)](https://david-dm.org/jasonmit/virtual-each#info=devDependencies)

A direct port of react-infinite-list to Ember.  This was created as a benchmark exercise.

This component will only ever render DOM nodes for what can fill the view port.  Using the power of Glimmer, it will reuse the DOM nodes it's already created and swap out the content as the user scrolls.

If you want a more flexible virtualization component, please try [ember-collection](https://github.com/emberjs/ember-collection).

## Usage

```hbs
{{#virtual-each
  height=200 // required: total height
  itemHeight=36 // required: row height
  onScrollBottomed=(action 'handlePageBottom') // optional: invoked when the scroller hits the bottom
  positionIndex=0 // optional: used to scroll to a specific item index
  items=items as |item actualIndex virtualIndex|
}}
  <div class="person-row">
    <img src={{item.picture}} />
    <div>
      <div>{{actualIndex}}. {{item.name.last}}, {{item.name.first}}</div>
      <div class="company">{{item.company}}</div>
    </div>
  </div>
{{else}}
  <strong>No results</strong>
{{/virtual-each}}
```

## CSS

Add the following CSS snippet to `styles/app.css`:

```css
.virtual-each {
  overflow-y: auto;
}

.infinite-list-content {
  list-style: none;
  margin: 0;
  padding: 0;
}
```

## Demo

![](images/screencast.gif)
<commit_msg>Initial box sizing README<commit_after># virtual-each
![NPM Version](https://img.shields.io/npm/v/virtual-each.svg)
[![Build Status](https://travis-ci.org/jasonmit/virtual-each.svg?branch=master)](https://travis-ci.org/jasonmit/virtual-each)
[![Dependency Status](https://david-dm.org/jasonmit/virtual-each.svg)](https://david-dm.org/jasonmit/virtual-each)
[![devDependency Status](https://david-dm.org/jasonmit/virtual-each/dev-status.svg)](https://david-dm.org/jasonmit/virtual-each#info=devDependencies)

A direct port of react-infinite-list to Ember.  This was created as a benchmark exercise.

This component will only ever render DOM nodes for what can fill the view port.  Using the power of Glimmer, it will reuse the DOM nodes it's already created and swap out the content as the user scrolls.

If you want a more flexible virtualization component, please try [ember-collection](https://github.com/emberjs/ember-collection).

## Usage

```hbs
{{#virtual-each
  height=200 // required: total height
  itemHeight=36 // required: row height
  onScrollBottomed=(action 'handlePageBottom') // optional: invoked when the scroller hits the bottom
  positionIndex=0 // optional: used to scroll to a specific item index
  items=items as |item actualIndex virtualIndex|
}}
  <div class="person-row">
    <img src={{item.picture}} />
    <div>
      <div>{{actualIndex}}. {{item.name.last}}, {{item.name.first}}</div>
      <div class="company">{{item.company}}</div>
    </div>
  </div>
{{else}}
  <strong>No results</strong>
{{/virtual-each}}
```

## CSS

Add the following CSS snippet to `styles/app.css`:

```css
.virtual-each {
  overflow-y: auto;
}

.infinite-list-content {
  box-sizing: initial;
  -moz-box-sizing: initial;
  -webkit-box-sizing: initial;
  list-style: none;
  margin: 0;
  padding: 0;
}
```

## Demo

![](images/screencast.gif)

{'fraction_non_alphanumeric': 0.15770509977827052, 'fraction_numerical': 0.004434589800443459, 'mean_word_length': 4.299559471365638, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 25, 'https://': 16, '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': '579981', 'n_tokens_mistral': 1220, 'n_tokens_neox': 1168, 'n_words': 301}