feat: add prop 'virtual'

Author: phphe

lib/VirtualList.tsx

@@ -50,6 +50,10 @@ export const defaultProps = {
    * The visible space of the list. It is only used before DOM created(SSR).
    */
   listSize: 1000,
+  /**
+   * Whether to enable the virtual list feature.
+   */
+  virtual: true,
 }
 
 export interface VirtualListHandle {
@@ -72,7 +76,7 @@ export const VirtualList = forwardRef(function <ITEM>(
   const [scrollTop, setscrollTop] = useState(0);
   const [listSize, setlistSize] = useState(props.listSize!);
   const [forceRerender, setforceRerender] = useState([]); // change value to force rerender
-  const ignoreScrollOnce = useRef(false);
+  const ignoreUpdateScrollTopOnce = useRef(false);
   // 
   const totalSpace = itemSize * count
   let topSpace = scrollTop - buffer
@@ -144,8 +148,8 @@ export const VirtualList = forwardRef(function <ITEM>(
 
     setlistSize(list.current!.clientHeight)
 
-    if (ignoreScrollOnce.current) {
-      ignoreScrollOnce.current = false
+    if (ignoreUpdateScrollTopOnce.current) {
+      ignoreUpdateScrollTopOnce.current = false
     } else {
       const scrollTop = list.current!.scrollTop;
       if (Math.abs(prevScrollTop.current - scrollTop) > (props.triggerDistance ?? itemSize)) {
@@ -183,7 +187,7 @@ export const VirtualList = forwardRef(function <ITEM>(
       if (el) {
         // @ts-ignore
         el.scrollIntoView({ block })
-        ignoreScrollOnce.current = true
+        ignoreUpdateScrollTopOnce.current = true
       }
     }
   }, [shouldScrollToIndex])

src/examples/scrollToIndex.tsx

@@ -19,13 +19,15 @@ export default function ScrollToIndexExample() {
       ref={ref}
       items={exampleData}
       style={{ height: '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}
+      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>
-      </div>}
+      }
     ></VirtualList>
     <br />
     <a href="https://github.com/phphe/react-base-virtual-list/blob/main/src/examples/scrollToIndex.tsx">Source Code</a>