node package manager

unendlich

unendlich

Development sponsored by voltra.co build status

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
})

Installation

$ npm install unendlich

API

new Unendlich({ rows, inner, outer, render, update, page = 100, padding = 50, 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