unendlich

2.3.0 • Public • Published

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

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

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 2.3.0
    1
    • latest

Version History

Package Sidebar

Install

npm i unendlich

Weekly Downloads

3

Version

2.3.0

License

MIT

Last publish

Collaborators

  • juliangruber