/solid-windowed

Given a list of items, only render what's visible on the screen while allowing scrolling the whole list.

Primary LanguageJavaScript

Solid Windowed

Given a list of items, only render what's visible on the screen while allowing scrolling the whole list.

A Solid component. See https://www.solidjs.com/

Usage

Use in the same way as a solid For. Please see: https://www.solidjs.com/docs/latest/api

import Windowed from 'solid-windowed'

let list = []
for (let i = 0; i < 250_000; i++) list.push(i)

export default function YourComponent() {
	return (
		<div style="height:100%;">
			<Windowed each={list}>
				{(value, index) => {
					return (
						<div>
							Index in list is {index}, value is: {value}
						</div>
					)
				}}
			</Windowed>
		</div>
	)
}

Install

npm install solid-windowed

How it works?

It renders the first 10 elements of the list, then averages the height and with that in mind, we get the height of the container and render N items. As you scroll we slice the list to show what's supposed to be visible. If our average didn't fill the whole available space, we will add more items till its filled.

Caveats

Alternatives

I started this project without knowing there was already an implementation of this concept

Bugs That Have Been Fixed

The end of the list, seems to be a problematic edge case for the implementation of this concept.

  • scrolling to the bottom doesn't render the last few items
  • when at the bottom of the list and then maximising to a bigger size, doesn't render previous items

Author

URL