chore: add example

Author: phphe

src/App.css

@@ -1,34 +1,32 @@
 import { useMemo } from 'react'
-import './App.css'
-import { VirtualList, } from './components/VirtualList'
+import { VirtualList, } from './VirtualList'
+import exampleData from './example_data.json'
 
 function App() {
-  const items = useMemo(
-    () =>
-      new Array(1000).fill(1).map((v, i) => ({
-        id: i,
-        text: 'Item ' + i,
-        lineHeight: 20 + (i % 20) + 'px',
-        width: 100 + (i % 30) + 'px',
-      })),
-    [],
-  )
-
-  const styles = {
-    node: {
-      border: '1px solid #ccc',
-    },
-  }
   return (
-    <div>
+    <>
+      <b>@phphe/react-base-virtual-list</b> on <a href="https://github.com/phphe/react-base-virtual-list">Github</a>
       <div>
-        <h1>vertical</h1>
-        <VirtualList
-          items={items}
-          style={{ height: '600px' }}
-        ></VirtualList>
-      </div>
-    </div>
+        <h1>Virtual List Demo</h1>
+        <ul>
+          <li>Dynamic, the list items are not the same height.</li>
+          <li>1000 items in the demo.</li>
+        </ul>
+        <div>
+          <VirtualList
+            items={exampleData}
+            style={{ height: '600px', width: '600px', border: '1px solid #ccc', padding: '10px' }}
+            renderItem={(item, index) => <div key={index} style={{ marginBottom: '10px' }}>
+              <h3>{index}. {item.headline}</h3>
+              <div>
+                <div style={{ float: 'left', width: '100px', height: '100px', background: '#f0f0f0', borderRadius: '5px', marginRight: '10px' }}></div>
+                {item.content}
+              </div>
+            </div>}
+          ></VirtualList><a href="https://github.com/phphe/react-base-virtual-list/blob/main/src/App.tsx">Source Code</a>
+        </div>
+      </div >
+    </>
   )
 }
 

src/App.tsx

@@ -12,8 +12,8 @@ import React, {
 export function VirtualList(
   props,
 ) {
-  const buffer = props.buffer || 100
   const [itemSize, setitemSize] = useState(props.itemSize || 100);
+  const buffer = useMemo(() => props.buffer || Math.max(itemSize * 5, 100), [props.buffer, itemSize]);
   const count = props.items.length
   const list = useRef(null);
   const listInner = useRef(null);
@@ -71,9 +71,9 @@ export function VirtualList(
     }
   }
   // 
-  return <div ref={list} onScroll={handleScroll} style={{ height: '500px', overflow: 'auto', }}>
+  return <div ref={list} onScroll={handleScroll} className={props.className} style={{ overflow: 'auto', ...props.style }}>
     <div ref={listInner} style={{ display: 'flex', flexDirection: 'column', ...listInnerStyle }}>
-      {visible.map((item, i) => <div key={item.id}>{item.text}</div>)}
+      {visible.map((item, i) => props.renderItem(item, i + startIndex))}
     </div>
   </div>
 }