add startAt prop support

Author: stevensacks

README.md

@@ -27,6 +27,7 @@ The `overflow` default value of `auto` is applied via `style`. So, if you want t
 - `overflow` - You can set this to `auto` or `scroll` ("auto" is the default).
 - `row` - Your row component.
 - `rowHeight` - Starting row height (100 by default) - it starts with this as an estimate for all rows, and then measures and caches the actual height of each row is as you scroll.
+- `startAt` - You can pass an index to start the list at (0 by default).
 - `style` - A style object applied to the component if you prefer using inline styling instead of css.
 - `...rowProps` - Any additional props you pass will be applied to your row components, for example `onClick`.
 
@@ -38,6 +39,7 @@ import ReactSmartScroll from 'react-smart-scroll';
     data={data} 
     overflow="scroll"
     row={TestRow}
+    startAt={5}
     onClick={() => console.log('Hello!')} // passed to row components
     label="My text is: " // passed to row components
 />
@@ -67,9 +69,7 @@ Unlike other virtual scrolling components/libraries out there, there are no unne
 #### Firefox Note
 The latest version of Firefox doesn't seem to keep up with React's rendering speed with `useLayoutEffect()` or `useEffect()`, so if you grab the scrollbar and scroll up and down really fast, you'll see blank space momentarily. Other browsers don't appear to have this problem. Using the mouse wheel to scroll looks good in all browsers.
 
-## Future Stuff
-I'm working on the ability to scroll to a specific row in the list programmatically.
-
+## Closing Note
 I hope you enjoy using this component as much as I enjoyed making it!
 
 Follow me:

demo/src/index.js

@@ -12,7 +12,7 @@ const Demo = () => {
         <div>
             <h1>React Smart Scroll Demo</h1>
             <div className="click-status">{clicked}</div>
-            <ReactSmartScroll className="demo-smart-scroll" data={data} onClick={onClick} row={TestRow}/>
+            <ReactSmartScroll className="demo-smart-scroll" data={data} onClick={onClick} row={TestRow} startAt={10}/>
         </div>
     );
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-smart-scroll",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Smart Scroll React Component for long lists",
   "author": "Steven Sacks",
   "homepage": "https://github.com/stevensacks/react-smart-scroll",

src/ReactSmartScroll/index.js

@@ -1,19 +1,29 @@
-import {calcEndIndex, calcStartIndex} from './utils';
+import {calcEndIndex, calcStartIndex, sumRange} from './utils';
 import React, {
     useEffect,
     useLayoutEffect,
+    useReducer,
     useRef,
     useState,
-    useReducer,
 } from 'react';
 import ReactSmartScrollRow from './ReactSmartScrollRow';
-import {sumRange} from './utils';
 import useComponentRect from '../hooks/useComponentRect';
 import useScroll from '../hooks/useScroll';
 import useScrollToTop from '../hooks/useScrollToTop';
 
 const ReactSmartScroll = props => {
-    const {className, data, overflow, row, rowHeight, style, ...rowProps} = props;
+    const {
+        className,
+        data,
+        overflow,
+        row,
+        rowHeight,
+        startAt,
+        style,
+        ...rowProps
+    } = props;
+
+    const [start, setStart] = useState(0);
 
     const [actualHeights, setActualHeights] = useReducer((state, action) => {
         if (!action.reset) {
@@ -43,7 +53,10 @@ const ReactSmartScroll = props => {
     // useEffect with this has considerable redraw lag
     useLayoutEffect(() => {
         if (visible.height) {
-            const startIndex = calcStartIndex(actualHeights, scroll.top);
+            const startIndex =
+                start !== startAt
+                    ? startAt
+                    : calcStartIndex(actualHeights, scroll.top);
             const endIndex = calcEndIndex(
                 actualHeights,
                 visible.height,
@@ -73,23 +86,49 @@ const ReactSmartScroll = props => {
                 contentHeight,
             };
             setMeasurements(measurements);
+            if (start !== startAt) {
+                scrollRef.current.scrollTop = paddingTop;
+                defer(() => {
+                    setStart(startAt);
+                    if (data[startAt]) {
+                        const el = document.querySelector(
+                            `[data-id="${data[startAt].id}"]`
+                        );
+
+                        if (el) el.scrollIntoView();
+                    }
+                });
+            }
         }
-    }, [actualHeights, scroll.top, setMeasurements, visible.height]);
+    }, [
+        actualHeights,
+        data,
+        scroll.top,
+        setMeasurements,
+        setStart,
+        start,
+        startAt,
+        visible.height,
+    ]);
 
     const {endIndex, paddingBottom, paddingTop, startIndex} = measurements;
 
     return (
-        <div ref={scrollRef} className={className || ''} style={{overflow, ...style}}>
-            <div style={{paddingBottom, paddingTop: paddingTop}}>
+        <div
+            ref={scrollRef}
+            className={className || ''}
+            style={{overflow, ...style}}
+        >
+            <div style={{paddingBottom, paddingTop}}>
                 {data.slice(startIndex, endIndex + 1).map((item, i) => (
                     <ReactSmartScrollRow
                         key={item.id || startIndex + i}
                         Component={row}
                         data={item}
                         onUpdate={setActualHeights}
-                        rowProps={rowProps}
                         rowHeight={actualHeights[startIndex + i]}
                         rowIndex={startIndex + i}
+                        rowProps={rowProps}
                     />
                 ))}
             </div>
@@ -103,6 +142,7 @@ ReactSmartScroll.defaultProps = {
     overflow: 'auto',
     row: () => null,
     rowHeight: 100,
+    startAt: 0,
     style: {},
 };
 

src/ReactSmartScroll/utils.js

@@ -24,5 +24,11 @@ export const calcEndIndex = (actualHeights, visibleHeight, startIndex) => {
     return len - 1;
 };
 
-export const sumRange = (array, start, end) =>
-    array.slice(start, end + 1).reduce((acc, val) => acc + val, 0);
+export const sumRange = (array, start, end) => {
+    let result = 0;
+    const e = end + 1;
+    for (let i = start; i < e; i++) {
+        result += array[i] || 0;
+    }
+    return result;
+};