feat: Add scrollToIndex and scrollToOffset API

- `scrollToIndex: Function(index: Integer) => void 0`
  - Call this function to scroll the top/left of the parentRef element to the start of the item located at the passed index.
- `scrollToOffset: Function(offsetInPixels: Integer) => void 0`
  - Call this function to scroll the top/left of the parentRef element to the passed pixel offset.

Author: tannerlinsley

README.md

@@ -256,6 +256,8 @@ const {
     /* ... */
   ],
   totalSize,
+  scrollToIndex,
+  scrollToOffset,
 } = useVirtual({
   size,
   parentRef,
@@ -300,11 +302,15 @@ const {
       - The static/variable or, if dynamically rendered, the measured size of the item
     - `end: Integer`
       - The ending measurement of the item
-    - `measureRef: React.useRef | Function(el) => void 0`
+    - `measureRef: React.useRef | Function(el: DOMElement) => void 0`
       - The ref/function to place on the rendered element to enable dynamic measurement rendering
 - `totalSize: Integer`
   - The total size of the entire virtualizer
   - When using dynamic measurement refs, this number may change as items are measured after they are rendered.
+- `scrollToIndex: Function(index: Integer) => void 0`
+  - Call this function to scroll the top/left of the parentRef element to the start of the item located at the passed index.
+- `scrollToOffset: Function(offsetInPixels: Integer) => void 0`
+  - Call this function to scroll the top/left of the parentRef element to the passed pixel offset.
 
 # Contributors ✨
 

examples/sandbox/src/styles.css

@@ -4,7 +4,7 @@ html {
 }
 
 .List {
-  border: 1px solid #d9dddd;
+  border: 1px solid #e6e4dc;
 }
 
 .ListItemEven,
@@ -15,11 +15,11 @@ html {
 }
 
 .ListItemEven {
-  background-color: #f8f8f0;
+  background-color: #e6e4dc;
 }
 
 .Grid {
-  border: 1px solid #d9dddd;
+  border: 1px solid #e6e4dc;
 }
 
 .GridItemEven,
@@ -30,5 +30,5 @@ html {
 }
 
 .GridItemEven {
-  background-color: #f8f8f0;
+  background-color: #e6e4dc;
 }

src/index.js

@@ -25,14 +25,6 @@ export function useVirtual({
     _setScrollOffset(newScrollOffset)
   })
 
-  const setScrollOffset = React.useCallback(
-    offset => {
-      _setScrollOffset(offset)
-      parentRef.current[scrollKey] = offset
-    },
-    [parentRef, scrollKey]
-  )
-
   const scrollOffsetPlusSize = scrollOffset + outerSize
 
   const [measuredCache, setMeasuredCache] = React.useState({})
@@ -107,9 +99,29 @@ export function useVirtual({
     return items
   }, [startIndex, endIndex, measurements, sizeKey])
 
+  const scrollToOffset = React.useCallback(
+    offset => {
+      _setScrollOffset(offset)
+      parentRef.current[scrollKey] = offset
+    },
+    [parentRef, scrollKey]
+  )
+
+  const scrollToIndex = React.useCallback(
+    index => {
+      const measurement = measurements[index]
+
+      if (measurement) {
+        scrollToOffset(measurement.start)
+      }
+    },
+    [measurements, scrollToOffset]
+  )
+
   return {
     items,
     totalSize: total,
-    setScrollOffset,
+    scrollToOffset,
+    scrollToIndex,
   }
 }