feat: ✨ Added a simple VirtualizedList component

This component provides a simple way to create a virtualized list

Author: doeixd

README.md

@@ -1,6 +1,6 @@
 # Solid.js Virtualized List Wrapper
 
-A helpful wrapper around `@tanstack/solid-virtual` that simplifies the creation of virtualized lists in Solid.js applications while maintaining full access to the underlying virtualizer's power.
+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.
 
 ## Features
 
@@ -47,6 +47,36 @@ const MyList = () => {
 }
 ```
 
+## VirtualizedList Component
+
+For simple use cases we provide a `VirtualizedList` component
+
+```jsx
+import { VirtualizedList } from '@doeixd/create-virtualized-list-solid';
+
+const MyList = () => {
+  const items = Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`);
+
+  return (
+    <VirtualizedList
+      data={items}
+      height={400}
+      width={300}
+      renderItem={({ item, virtualItem }) => (
+        <div style={{ 
+          padding: '10px',
+          background: virtualItem.isEven ? '#f0f0f0' : 'white'
+        }}>
+          {item}
+          {virtualItem.isLast && ' (Last Item)'}
+        </div>
+      )}
+    />
+  );
+};
+```
+The `VirtualizedList` component simplifies the creation of virtualized lists even further, handling all the setup and providing a clean interface for rendering items.
+
 ## Why is this hepful?
 
 ### Root and Container Elements
@@ -201,6 +231,21 @@ An object with the following properties:
 - `count`: Getter function for total item count (automatically determined)
 - `item`: Getter function for virtual items (alias for `virtualizer.getVirtualItems()`)
 
+### `VirtualizedList<T>(props)`
+
+Creates a simple generic virtualized list component.
+
+#### Props
+
+- `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 from `VirtualizerOptions` are also accepted and passed through to the underlying virtualizer.
+
 
 
 ## Advanced Usage
@@ -219,9 +264,9 @@ virtualList.virtualizer.scrollToIndex(50)
 
 ## TypeScript Support
 
-This wrapper is written in TypeScript and provides full type definitions:
+This wrapper is written in TypeScript and provides type definitions:
 
-```typescript
+```tsx
 interface MyItem {
   id: number;
   name: string;
@@ -233,6 +278,27 @@ const virtualList = createVirtualizedList<MyItem>({
 })
 ```
 
+```tsx
+interface MyItem {
+  id: number;
+  name: string;
+}
+
+const MyList = () => {
+  const items: MyItem[] = [/* ... */];
+
+  return (
+    <VirtualizedList<MyItem>
+      data={items}
+      height={400}
+      width={300}
+      renderItem={({ item }) => <div>{item.name}</div>}
+      determineKey={(item) => item.id}
+    />
+  );
+};
+```
+
 ## Requirements
 
 - Solid.js

src/VirtualizedList.tsx

@@ -0,0 +1,119 @@
+import { Component, JSX, For, createMemo, splitProps } from 'solid-js';
+import { createVirtualizedList, VirtualizedListArgs, VirtualItemWithExtras, ObjectWithKey, Primitive } from './createVirtualizedList';
+import { mergeProps } from 'solid-js';
+
+/**
+ * A function type for rendering individual items in the virtualized list.
+ * @template T The type of the data item.
+ */
+type RenderItemFunction<T> = (props: {
+  item: T;
+  virtualItem: VirtualItemWithExtras;
+}) => JSX.Element;
+
+type VirtualListProps<T> = Omit<VirtualizedListArgs<T>, 'data'>;
+
+/**
+ * Props for the VirtualizedList component.
+ * @template T The type of the data items in the list.
+ */
+interface VirtualizedListProps<T> extends Omit<VirtualListProps<T>, 'width' | 'height'> {
+  /** The array of data items to be rendered in the list. */
+  data: T[];
+  /** A function that renders each item in the list. */
+  renderItem: RenderItemFunction<T>;
+  /** The height of the virtualized list container. */
+  height?: number;
+  /** The width of the virtualized list container. */
+  width?: number;
+  /** Optional CSS class name for the list container. */
+  className?: string;
+  /** Optional inline styles for the list container. */
+  style?: JSX.CSSProperties;
+}
+
+const defaultProps = {
+  estimateSize: () => 50,
+  overscan: 5,
+};
+
+/**
+ * A  virtualized list component for Solid.js applications.
+ * This component efficiently renders large lists by only rendering the items currently in view.
+ *
+ * @template T The type of the data items in the list. Must extend Primitive or ObjectWithKey.
+ * @param {VirtualizedListProps<T>} userProps - The props for the virtualized list.
+ * @returns {JSX.Element} A JSX element representing the virtualized list.
+ *
+ * @example
+ * // Basic usage with an array of strings
+ * <VirtualizedList<string>
+ *   data={['Item 1', 'Item 2', 'Item 3']}
+ *   renderItem={({ item }) => <div>{item}</div>}
+ *   height={400}
+ *   width={300}
+ * />
+ *
+ * @example
+ * // Usage with an array of objects and custom styling
+ * interface User { id: number; name: string; }
+ * const users: User[] = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
+ *
+ * <VirtualizedList<User>
+ *   data={users}
+ *   renderItem={({ item, virtualItem }) => (
+ *     <div style={{ background: virtualItem.isEven ? '#f0f0f0' : 'white' }}>
+ *       {item.name}
+ *     </div>
+ *   )}
+ *   height={500}
+ *   width="100%"
+ *   estimateSize={() => 50}
+ *   determineKey={(user) => user.id}
+ *   className="user-list"
+ *   style={{ border: '1px solid #ccc' }}
+ * />
+ *
+ * @example
+ * // Usage with dynamic item heights
+ * <VirtualizedList<string>
+ *   data={longTexts}
+ *   renderItem={({ item }) => <div style={{ padding: '10px' }}>{item}</div>}
+ *   estimateSize={(index) => longTexts[index].length > 100 ? 100 : 50}
+ *   height={600}
+ *   width={400}
+ * />
+ */
+export function VirtualizedList<T extends Primitive | ObjectWithKey>(userProps: VirtualizedListProps<T>): JSX.Element {
+  const props = mergeProps(defaultProps, userProps);
+  const [local, virtualListProps] = splitProps(props, ['data', 'renderItem', 'height', 'width', 'className', 'style']);
+
+  const virtualList = createMemo(() => createVirtualizedList<T>({
+    ...virtualListProps,
+    data: () => local.data,
+    height: local.height,
+    width: local.width,
+  }));
+
+  return (
+    <div 
+      {...virtualList().root} 
+      style={mergeProps(
+        virtualList().root.style,
+        local.style
+      )}
+      class={local.className}
+    >
+      <div {...virtualList().container}>
+        <For each={virtualList().item}>
+          {virtualList().items((itemData) => (
+            local.renderItem({
+              item: itemData.data,
+              virtualItem: itemData.virtualItem,
+            })
+          ))}
+        </For>
+      </div>
+    </div>
+  );
+}

src/createVirtualizedList.ts

@@ -3,8 +3,8 @@ import { createUniqueId, mergeProps, createMemo, createSignal, onMount, untrack
 import { mergeRefs, createGenerateId } from "@kobalte/utils";
 import { isServer } from "solid-js/web";
 
-type Primitive = string | number | boolean | null | undefined;
-type ObjectWithKey = { [key: string]: any };
+export type Primitive = string | number | boolean | null | undefined;
+export type ObjectWithKey = { [key: string]: any };
 
 export type KeyFunction<T> = (item: T, index?: number) => string | number;
 

src/index.ts

@@ -1,4 +1,99 @@
-import Mod from './createVirtualizedList';
+/**
+ * @module @doeixd/create-virtualized-list-solid
+ * A Solid.js library for creating efficient virtualized lists.
+ */
 
+/**
+ * Creates a virtualized list with advanced configuration options.
+ * 
+ * @example
+ * ```tsx
+ * import { createVirtualizedList } from '@doeixd/create-virtualized-list-solid';
+ * import { For } from 'solid-js';
+ * 
+ * const MyList = () => {
+ *   const items = () => Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`);
+ * 
+ *   const virtualList = createVirtualizedList({
+ *     data: items,
+ *     estimateSize: () => 30,
+ *     overscan: 5
+ *   });
+ * 
+ *   return (
+ *     <div {...virtualList.root}>
+ *       <div {...virtualList.container}>
+ *         <For each={virtualList.item}>
+ *           {virtualList.items((item) => (
+ *             <div {...item.props}>{item.data}</div>
+ *           ))}
+ *         </For>
+ *       </div>
+ *     </div>
+ *   );
+ * };
+ * ```
+ */
 export { createVirtualizedList } from './createVirtualizedList';
-export default Mod;
+
+/**
+ * A ready-to-use virtualized list component with a simplified API.
+ * 
+ * @example
+ * ```tsx
+ * import { VirtualizedList } from '@doeixd/create-virtualized-list-solid';
+ * 
+ * const MyList = () => {
+ *   const items = Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`);
+ * 
+ *   return (
+ *     <VirtualizedList
+ *       data={items}
+ *       height={400}
+ *       width={300}
+ *       itemHeight={30}
+ *       renderItem={({ item, index }) => (
+ *         <div>{item}</div>
+ *       )}
+ *     />
+ *   );
+ * };
+ * ```
+ */
+export { VirtualizedList } from './VirtualizedList'
+
+import createVirtualizedList from './createVirtualizedList';
+import { VirtualizedList } from './VirtualizedList'
+
+/**
+ * Default export object containing both the createVirtualizedList function and the VirtualizedList component.
+ * 
+ * @example
+ * ```tsx
+ * import VirtualizedListLib from '@doeixd/create-virtualized-list-solid';
+ * 
+ * // Using createVirtualizedList
+ * const MyCustomList = () => {
+ *   const items = () => Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`);
+ *   const virtualList = VirtualizedListLib.createVirtualizedList({ data: items });
+ *   // ... rest of the component
+ * };
+ * 
+ * // Using VirtualizedList component
+ * const MySimpleList = () => {
+ *   const items = Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`);
+ *   return (
+ *     <VirtualizedListLib.VirtualizedList
+ *       data={items}
+ *       height={400}
+ *       width={300}
+ *       renderItem={({ item }) => <div>{item}</div>}
+ *     />
+ *   );
+ * };
+ * ```
+ */
+export default {
+  createVirtualizedList,
+  VirtualizedList
+}