useVirtual
const {virtualItems: [{ key, index, start, size, end, measureRef },/* ... */],totalSize,scrollToIndex,scrollToOffset,} = useVirtual({size,parentRef,estimateSize,overscan,horizontal,scrollToFn,useObserver,})
size: Integer
parentRef: React.useRef(DOMElement)
estimateSize: Function(index) => Integer
() => 50
React.useCallback()
overscan: Integer
1
horizontal: Boolean
false
true
, this virtualizer will use width
and scrollLeft
instead of height
and scrollTop
to determine size and offset of virtualized items.scrollToFn: Function(offset, defaultScrollToFn) => void 0
scrollToOffset
and scrollToIndex
are called.defaultScrollToFn
as seen in the sandbox's Smooth Scroll example.initialRect: Object({ width: number; height: number })
useObserver: Function(parentRef: React.useRef(DOMElement), initialRect?: { width: number; height: number }) => ({ width: number; height: number })
parentRef
's dimensionsreact-virtual
uses by default with ResizeObserver APIpaddingStart: Integer
0
paddingEnd: Integer
0
onScrollElement: React.useRef(DOMElement)
onScroll
event toscrollOffsetFn: Function(event?: Event) => number
parentRef
's width
or height
keyExtractor: Function(index) => String | Integer
rangeExtractor: Function(range: {start: number; end: number; overscan: number; size: number}) => number[]
defaultRangeExtractor
, is exportedReact.useCallback()
virtualItems: Array<item>
item: Object
key: String | Integer
index
index: Integer
start: Integer
size: Integer
end: Integer
measureRef: React.useRef | Function(el: DOMElement) => void 0
totalSize: Integer
scrollToIndex: Function(index: Integer, { align: String }) => void 0
align: 'start' | 'center' | 'end' | 'auto'
auto
start
places the item at the top/left of the visible scroll areacenter
places the item in the center of the visible scroll areaend
places the item at the bottom/right of the visible scroll areaauto
brings the item into the visible scroll area either at the start or end, depending on which is closer. If the item is already in view, it is placed at the top/left
of the visible scroll area.scrollToOffset: Function(offsetInPixels: Integer, { align: String }) => void 0
align: 'start' | 'center' | 'end' | 'auto'
start
start
places the offset at the top/left of the visible scroll areacenter
places the offset in the center of the visible scroll areaend
places the offset at the bottom/right of the visible scroll areaauto
brings the offset into the visible scroll area either at the start or end, depending on which is closer. If the offset is already in view, it is placed at the top/left
of the visible scroll area.The best JavaScript newsletter! Delivered every Monday to over 76,000 devs.