unendlich

Infinite scrolling component that works with any DOM structure and loads content lazily.

Usage

There needs to be an outer and an inner element, the outer element having

• a fixed height
• overflow auto
• position relative

The rest is up to you:

const Unendlich = require('unendlich')
const html = require('bel')

const rows = []
for (let i = 0; i < 1e5; i++) {
  rows.push({
    foo: String(new Date()),
    bar: 'beep',
    beep: Math.random().toString(16).slice(2)
  })
}

const inner = html`<div></div>`
const outer = html`<ul style="height: 800px; width: 600px; overflow: auto">${inner}</ul>`
document.body.appendChild(outer)

const example = new Unendlich({
  rows,
  inner,
  outer,
  render: row => html`<li>${row.foo}: ${row.bar} (${row.beep})</li>`,
  page: 100,
  padding: 50
})

Async support

A row element can also by an async function, which will then be resolved before rendering:

const rows = [
  async () => fetch(url)
]

Installation

$ npm install unendlich

API

new Unendlich({ rows, inner, outer, render, update, page = 100, padding = 50, rowHeight, debug = false })

Create a new instance and .render() it.

For extra performance, pass update which takes existing old row elements and updates them, instead of creating new ones. For example:

{
  render: row => html`<li>${row.foo}: ${row.bar} (${row.beep})</li>`,
  update: (row, el) => el.innerHTML = `${row.foo}: ${row.bar} (${row.beep})`
}

Unendlich#render({ refresh })

Force a render, if reset is true it will also rerender already rendered rows.

Unendlich#setRows(rows)

Update the row content. Doesn't trigger a rerender by itself.

Unendlich#setHeight(height, { render = true })

Update the #outer element's height. Example: unendlich.setHeight('200px').

License

MIT