A reusable module for creating infinite lists of elements where only the visible rows are rendered.
This is an early version that could likely break or have breaking changes!
- this does not yet work with rows of variable height
npm install --save infinite-elementsvar html = require('bel')
var infiniteElements = require('infinite-elements')
var rows = []
// generate some rows for demonstration purposes
for (var i = 0; i < 500; i++) {
rows.push(i)
}
function eachRow (i) {
return html`<div id="row-${i}" style="height: 30px;">
this is row ${i}
</div>`
}
var render = infiniteElements({
height: 300,
rowHeight: 30,
eachRow: eachRow
})
var tree = render(rows)
document.body.appendChild(tree)
// If you need to rerender the list:
tree.render(rows)
// useful if you add/remove/change elements in the rows arrayThis module is inspired by / partially extracted from view-list.