@solid-primitives/virtual
v0.2.2TypeScript
A virtualized list component for performantly rendering lists with many elements
0/weekUpdated 7 months agoMITUnpacked: 16.1 KB
Published by Spencer Whitehead
npm install @solid-primitives/virtual
@solid-primitives/virtual
- createVirtualList - A headless utility function for virtualized lists
- VirtualList - a basic, unstyled component based on createVirtualList
Installation
``bash`
npm install @solid-primitives/virtualor
yarn add @solid-primitives/virtualor
pnpm add @solid-primitives/virtual
How to use it
$3
createVirtualList is a headless utility for constructing your own virtualized list components with maximum flexibility.
`tsx
function MyComp(): JSX.Element {
const items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const rootHeight = 20;
const rowHeight = 10;
const overscanCount = 5;
const [{ containerHeight, viewerTop, visibleItems }, onScroll] = createVirtualList({
// the list of items - can be a signal
items,
// the height of the root element of the virtualizedList - can be a signal
rootHeight,
// the height of individual rows in the virtualizedList - can be a signal
rowHeight,
// the number of elements to render both before and after the visible section of the list, so passing 5 will render 5 items before the list, and 5 items after. Defaults to 1, cannot be set to zero. This is necessary to hide the blank space around list items when scrolling - can be a signal
overscanCount,
});
return (
overflow: "auto",
// root element's height must be rootHeight
height: ${rootHeight}px,${containerHeight()}px
}}
// outermost container must use onScroll
onScroll={onScroll}
>
position: "relative",
width: "100%",
// list container element's height must be set to containerHeight()
height: ,${viewerTop()}px
}}
>
position: "absolute",
// viewer element's top must be set to viewerTop()
top: ,
}}
>
{/ only visibleItems() are ultimately rendered /}
{item => {item}}
);
}
`
$3
is a basic, unstyled virtual list component you can drop into projects without modification.`tsx
each={[0, 1, 2, 3, 4, 5, 6, 7]}
// the optional fallback to display if the list of items is empty
fallback={No items}
// the number of elements to render both before and after the visible section of the list, so passing 5 will render 5 items before the list, and 5 items after. Defaults to 1, cannot be set to zero. This is necessary to hide the blank space around list items when scrolling
overscanCount={5}
// the height of the root element of the virtualizedList itself
rootHeight={20}
// the height of individual rows in the virtualizedList
rowHeight={10}
>
{
// the flowComponent that will be used to transform the items into rows in the list
item => {item}
}
``The tests describe the exact behavior and how overscanCount handles the start/end of the list in more detail.
Note that the component only handles vertical lists where the number of items is known and the height of an individual item is fixed.
Demo
You can see the VirtualList in action in the following sandbox: https://primitives.solidjs.community/playground/virtual
Changelog
See CHANGELOG.md