Repository files navigation

A helpful wrapper around@tanstack/solid-virtual that simplifies the creation of virtualized lists in Solid.js apps while maintaining full access to the underlying virtualizer.

• Simplifies the setup of virtualized lists
• Automatically generatesroot andcontainer props
• Provides extra information for each item (e.g.,isLast,isEven)
• Automatically determines the count based on your data
• Maintains full access to all@tanstack/solid-virtual features
• Includes a higher-levelVirtualizedList component for simple use cases

npm install @doeixd/create-virtualized-list-solid

import{createVirtualizedList}from'@doeixd/create-virtualized-list-solid';import{For}from'solid-js';constMyList=()=>{constitems=()=>Array.from({length:10000},(_,i)=>`Item${i+1}`);constvirtualList=createVirtualizedList({data:items,});return(<div{...virtualList.root}><div{...virtualList.container}><Foreach={virtualList.item}>{virtualList.items((item)=>(<div{...item.props}>{item.data}{item.virtualItem.isLast&&' (Last Item)'}{item.virtualItem.isEven&&' (Even Index)'}</div>))}</For></div></div>)}

For simple use cases we provide aVirtualizedList component

import{VirtualizedList}from'@doeixd/create-virtualized-list-solid';constMyList=()=>{constitems=Array.from({length:10000},(_,i)=>`Item${i+1}`);return(<VirtualizedListdata={items}height={400}width={300}renderItem={({ item, virtualItem})=>(<divstyle={{padding:'10px',background:virtualItem.isEven ?'#f0f0f0' :'white'}}>{item}{virtualItem.isLast&&' (Last Item)'}</div>)}/>);};

TheVirtualizedList component simplifies the creation of virtualized lists even further, handling all the setup and providing a clean interface for rendering items.

In a virtualized list, two key elements are required:

1. Root Element: This is the scrollable viewport. It determines the visible area of the list.
2. Container Element: This is a tall element that provides the full scrollable height/width of the list.

Manually setting up these elements with the correct properties can be tedious and error-prone. Our wrapper generates the necessary props for both elements, ensuring:

• Correct sizing and positioning
• Proper event handling for virtualization
• Consistent styling defaults

By using{...vList.root} and{...vList.container}, you automatically apply all necessary properties without having to manage them yourself.

Thelist.items helper is a function that wraps each item in your list, providing:

• Correct positioning within the container
• Access to the virtual item data
• Additional useful properties likeisLast andisEven

This helper simplifies the rendering of each item and provides a consistent interface for working with your list data.

Here's how the wrapper simplifies your code:

import{createVirtualizer}from'@tanstack/solid-virtual';import{createSignal,For}from'solid-js';constVirtualList=()=>{const[listItems]=createSignal(Array.from({length:10000},(_,i)=>`Item${i}`));const[parentRef,setParentRef]=createSignal(null);constvirtualizer=createVirtualizer({count:listItems().length,getScrollElement:()=>parentRef(),estimateSize:()=>35,overscan:5,});return(<divref={setParentRef}style={{height:'400px',overflow:'auto'}}><divstyle={{height:`${virtualizer.getTotalSize()}px`,width:'100%',position:'relative'}}><Foreach={virtualizer.getVirtualItems()}>{(virtualRow)=>(<divstyle={{position:'absolute',top:0,left:0,width:'100%',height:`${virtualRow.size}px`,transform:`translateY(${virtualRow.start}px)`,}}>{listItems()[virtualRow.index]}</div>)}</For></div></div>);};

import{createVirtualizedList}from'@doeixd/solid-virtualized-list-wrapper';import{For}from'solid-js';constVirtualList=()=>{constlistItems=()=>Array.from({length:10000},(_,i)=>`Item${i}`);constvList=createVirtualizedList({data:listItems,});return(<div{...vList.root}><div{...vList.container}><Foreach={vList.item}>{vList.items((item)=>(<div{...item.props}>{item.data}</div>))}</For></div></div>);};

As you can see, the wrapper:

1. Eliminates the need to manually set up the virtualizer
2. Automatically generates necessary props for root and container elements
3. Provides a simpler interface for rendering items
4. Handles positioning and styling of items internally
5. Reduces boilerplate and potential for errors

By abstracting these details, the wrapper allows you to focus on your list content rather than the complexities of virtualization.

Creates a virtualized list wrapper.

args: An object that extendsVirtualizerOptions from@tanstack/solid-virtual with additional properties:

• data: Function returning an array of items to be rendered
• itemHeight: (Optional) Fixed height for items
• width: (Optional) Width of the list container
• height: (Optional) Height of the list container
• rootProps: (Optional) Additional props for the root element
• containerProps: (Optional) Additional props for the container element
• itemProps: (Optional) Additional props for each item element

All otherVirtualizerOptions are also accepted and passed through to the underlying virtualizer.

An object with the following properties:

• root: Getter function for root element props
• container: Getter function for container element props
• items: Function to create item wrappers with extra info
• virtualizer: The underlying@tanstack/solid-virtual instance
• id: Unique identifier for the list
• count: Getter function for total item count (automatically determined)
• item: Getter function for virtual items (alias forvirtualizer.getVirtualItems())

Creates a simple generic virtualized list component.

• data: Array of items to be rendered
• renderItem: Function to render each item
• height: Height number of pixels for the list container
• width: Width number of pixels for the list container
• className: Optional CSS class for the list container
• style: Optional inline styles for the list container

All other props fromVirtualizerOptions are also accepted and passed through to the underlying virtualizer.

You can access all features of@tanstack/solid-virtual through thevirtualizer property:

constvirtualList=createVirtualizedList({data:items,// ... other options})// Use any@tanstack/solid-virtual methodvirtualList.virtualizer.scrollToIndex(50)

In thevirtualList.items function we allow you to provide a boolean representing whether or not you'd like reactivity inside the callback function for item rendering, allowing you to balance performance and reactivity based on your specific needs.

You can now specify whether each item should track changes and re-render, or use the default untracked behavior for maximum performance.

import{createVirtualizedList}from'@doeixd/create-virtualized-list-solid';import{For}from'solid-js';constMyList=()=>{constitems=()=>Array.from({length:10000},(_,i)=>`Item${i+1}`);constvirtualList=createVirtualizedList({data:items,});return(<div{...virtualList.root}><div{...virtualList.container}><Foreach={virtualList.item}>{virtualList.items((item)=>(<div{...item.props}>{item.data}{item.virtualItem.isLast&&' (Last Item)'}{item.virtualItem.isEven&&' (Even Index)'}</div>),true)}{/* Set to true to enable change tracking */}</For></div></div>)}

By setting the second parameter ofvirtualList.items to true, you enable change tracking for that item. This allows the item to react to changes in its data or properties, at the cost of some performance.

For items that need to update frequently based on external stateWhen implementing dynamic content that changes after initial renderFor interactive elements within list items

For static content that doesn't change after initial renderWhen optimizing for maximum performance with large listsFor simple, non-interactive list items

This hybrid approach allows you to fine-tune the balance between performance and reactivity in your virtualized lists.

ThecreateVirtualizedList function is designed to be reactive to changes in its options and data. Here's how reactivity is handled for the virtualizer:

1. Options Reactivity:The virtualizer options are wrapped in acreateMemo, which means they will automatically update if any reactive dependencies change. This includes changes to thedata function,count, or any other option passed tocreateVirtualizedList.

   const[itemHeight,setItemHeight]=createSignal(50);constvirtualList=createVirtualizedList({data:items,estimateSize:()=>itemHeight()});// Later, updating itemHeight will cause the virtualizer to updatesetItemHeight(75);

2. Data Changes:If yourdata function is reactive (e.g., it's based on a signal or store), changes to the underlying data will automatically be reflected in the virtualizer.

   const[items,setItems]=createSignal([...]);constvirtualList=createVirtualizedList({data:items});// Later, updating items will cause the virtualizer to updatesetItems([...newItems]);

3. Manual Updates:In some cases, you might need to manually trigger an update of the virtualizer. You can do this by accessing the underlying virtualizer instance:

   virtualList.virtualizer.measure();// Force remeasure all itemsvirtualList.virtualizer.getVirtualItems();// Force recalculation of virtual items

4. Resize Handling:The virtualizer automatically handles window resize events. If you're using a custom container and its size changes, you might need to manually notify the virtualizer:

   window.addEventListener('custom-resize',()=>{virtualList.virtualizer.measure();});

By leveraging Solid.js's fine-grained reactivity system,createVirtualizedList ensures that your virtualized lists stay up-to-date and performant, even as the underlying data or configuration changes. This reactive approach allows you to create dynamic, responsive lists without manually managing updates to the virtualizer.

This wrapper is written in TypeScript and provides type definitions:

interfaceMyItem{id:number;name:string;}constvirtualList=createVirtualizedList<MyItem>({data:()=>myItems,// ... other options})

interfaceMyItem{id:number;name:string;}constMyList=()=>{constitems:MyItem[]=[/* ... */];return(<VirtualizedList<MyItem>data={items}height={400}width={300}renderItem={({ item})=><div>{item.name}</div>}determineKey={(item)=>item.id}/>);};

• Solid.js
• @tanstack/solid-virtual

Contributions are welcome! Feel free to open issues or submit pull requests.

This project is licensed under the MIT License.