Virtuoso Grid API Reference
All properties are optional - by default, the component will render empty.
If you are using TypeScript and want to use correctly typed component ref
, you can use VirtuosoGridHandle
types.
import { VirtuosoGrid, VirtuosoGridHandle } from 'react-virtuoso'
//...
const ref = useRef<VirtuosoGridHandle>(null)
//...
<VirtuosoGrid ref={ref} /*...*/ />
Properties
"component-interfaces/VirtuosoGrid".VirtuosoGridProps
Type parameters
Name | Default |
---|---|
D | - |
C | unknown |
Hierarchy
{}
↳ VirtuosoGridProps
Properties
atBottomStateChange
• Optional
atBottomStateChange: (atBottom: boolean) => void
Defined in component-interfaces/VirtuosoGrid.ts:88
Called with true / false when the list has reached the bottom / gets scrolled up.
Can be used to load newer items, like tail -f
.
atTopStateChange
• Optional
atTopStateChange: (atTop: boolean) => void
Defined in component-interfaces/VirtuosoGrid.ts:93
Called with true
/ false
when the list has reached the top / gets scrolled down.
components
• Optional
components: GridComponents<C>
Defined in component-interfaces/VirtuosoGrid.ts:42
Use the components
property for advanced customization of the elements rendered by the list.
computeItemKey
• Optional
computeItemKey: GridComputeItemKey<D, C>
Defined in component-interfaces/VirtuosoGrid.ts:54
If specified, the component will use the function to generate the key
property for each list item.
context
• Optional
context: C
Defined in component-interfaces/VirtuosoGrid.ts:26
Additional context available in the custom components and content callbacks
customScrollParent
• Optional
customScrollParent: HTMLElement
Defined in component-interfaces/VirtuosoGrid.ts:118
Pass a reference to a scrollable parent element, so that the grid won't wrap in its own.
data
• Optional
data: readonly D[]
Defined in component-interfaces/VirtuosoGrid.ts:21
The data items to be rendered. If data is set, the total count will be inferred from the length of the array.
endReached
• Optional
endReached: (index: number) => void
Defined in component-interfaces/VirtuosoGrid.ts:72
Gets called when the user scrolls to the end of the list. Receives the last item index as an argument. Can be used to implement endless scrolling.
initialItemCount
• Optional
initialItemCount: number
Defined in component-interfaces/VirtuosoGrid.ts:32
Use for server-side rendering - if set, the list will render the specified amount of items regardless of the container / item size.
isScrolling
• Optional
isScrolling: (isScrolling: boolean) => void
Defined in component-interfaces/VirtuosoGrid.ts:66
Called when the list starts/stops scrolling.
itemClassName
• Optional
itemClassName: string
Defined in component-interfaces/VirtuosoGrid.ts:108
Sets the grid items' className
itemContent
• Optional
itemContent: GridItemContent<D, C>
Defined in component-interfaces/VirtuosoGrid.ts:37
Set the callback to specify the contents of the item.
listClassName
• Optional
listClassName: string
Defined in component-interfaces/VirtuosoGrid.ts:103
Sets the className for the list DOM element
logLevel
• Optional
logLevel: LogLevel
Defined in component-interfaces/VirtuosoGrid.ts:125
set to LogLevel.DEBUG to enable various diagnostics in the console, the most useful being the item measurement reports.
Ensure that you have "all levels" enabled in the browser console too see the messages.
overscan
• Optional
overscan: number | { main: number ; reverse: number }
Defined in component-interfaces/VirtuosoGrid.ts:49
Set the overscan property to make the component "chunk" the rendering of new items on scroll.
The property causes the component to render more items than the necessary, but reduces the re-renders on scroll.
Setting { main: number, reverse: number }
lets you extend the list in both the main and the reverse scrollable directions.
rangeChanged
• Optional
rangeChanged: (range: ListRange) => void
Defined in component-interfaces/VirtuosoGrid.ts:82
Called with the new set of items each time the list items are rendered due to scrolling.
scrollSeekConfiguration
• Optional
scrollSeekConfiguration: ScrollSeekConfiguration | false
Defined in component-interfaces/VirtuosoGrid.ts:61
Use to display placeholders if the user scrolls fast through the list.
Set components.ScrollSeekPlaceholder
to change the placeholder content.
scrollerRef
• Optional
scrollerRef: (ref: HTMLElement | null) => any
Defined in component-interfaces/VirtuosoGrid.ts:98
Provides access to the root DOM element
startReached
• Optional
startReached: (index: number) => void
Defined in component-interfaces/VirtuosoGrid.ts:77
Called when the user scrolls to the start of the list.
totalCount
• Optional
totalCount: number
Defined in component-interfaces/VirtuosoGrid.ts:16
The total amount of items to be rendered.
useWindowScroll
• Optional
useWindowScroll: boolean
Defined in component-interfaces/VirtuosoGrid.ts:113
Uses the document scroller rather than wrapping the grid in its own.
Methods
"component-interfaces/VirtuosoGrid".VirtuosoGridHandle
Hierarchy
- VirtuosoGridHandle
Methods
scrollBy
▸ scrollBy(location
: ScrollToOptions): void
Defined in component-interfaces/VirtuosoGrid.ts:131
Parameters:
Name | Type |
---|---|
location | ScrollToOptions |
Returns: void
scrollTo
▸ scrollTo(location
: ScrollToOptions): void
Defined in component-interfaces/VirtuosoGrid.ts:130
Parameters:
Name | Type |
---|---|
location | ScrollToOptions |
Returns: void
scrollToIndex
▸ scrollToIndex(location
: number | IndexLocationWithAlign): void
Defined in component-interfaces/VirtuosoGrid.ts:129
Parameters:
Name | Type |
---|---|
location | number | IndexLocationWithAlign |
Returns: void