Interface: VirtuosoProps<D, C>
Type parameters
Name |
---|
D |
C |
Hierarchy
-
↳
VirtuosoProps
Properties
totalCount
• Optional
totalCount: number
The total amount of items to be rendered.
data
• Optional
data: readonly D
[]
The data items to be rendered. If data is set, the total count will be inferred from the length of the array.
context
• Optional
context: C
Additional context available in the custom components and content callbacks
overscan
• Optional
overscan: number
| { main
: number
; reverse
: number
}
The property accepts pixel values.
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.
See the increaseViewportBy
property for a similar behavior (equivalent to the overscan
in react-window).
increaseViewportBy
• Optional
increaseViewportBy: number
| { top
: number
; bottom
: number
}
The property accepts pixel values.
Set the increaseViewportBy property to artificially increase the viewport size, causing items to be rendered before outside of the viewport.
The property causes the component to render more items than the necessary, but can help with slow loading content.
Using { top?: number, bottom?: number }
lets you set the increase for each end separately.
topItemCount
• Optional
topItemCount: number
Set the amount of items to remain fixed at the top of the list.
For a header that scrolls away when scrolling, check the components.Header
property.
initialTopMostItemIndex
• Optional
initialTopMostItemIndex: number
| IndexLocationWithAlign
Set to a value between 0 and totalCount - 1 to make the list start scrolled to that item.
Pass in an object to achieve additional effects similar to scrollToIndex
.
initialScrollTop
• Optional
initialScrollTop: number
Set this value to offset the initial location of the list.
Warning: using this property will still run a render cycle at the scrollTop: 0 list window.
If possible, avoid using it and stick to initialTopMostItemIndex
instead.
initialItemCount
• Optional
initialItemCount: number
Use for server-side rendering - if set, the list will render the specified amount of items regardless of the container / item size.
components
• Optional
components: Components
<D
, C
>
Use the components
property for advanced customization of the elements rendered by the list.
itemContent
• Optional
itemContent: ItemContent
<D
, C
>
Set the callback to specify the contents of the item.
computeItemKey
• Optional
computeItemKey: ComputeItemKey
<D
, C
>
If specified, the component will use the function to generate the key
property for each list item.
defaultItemHeight
• Optional
defaultItemHeight: number
By default, the component assumes the default item height from the first rendered item (rendering it as a "probe").
If the first item turns out to be an outlier (very short or tall), the rest of the rendering will be slower, as multiple passes of rendering should happen for the list to fill the viewport.
Setting defaultItemHeight
causes the component to skip the "probe" rendering and use the property
value as default height instead.
itemSize
• Optional
itemSize: SizeFunction
Allows customizing the height/width calculation of Item
elements.
The default implementation reads el.getBoundingClientRect().height
and el.getBoundingClientRect().width
.
fixedItemHeight
• Optional
fixedItemHeight: number
Can be used to improve performance if the rendered items are of known size. Setting it causes the component to skip item measurements.
scrollSeekConfiguration
• Optional
scrollSeekConfiguration: false
| ScrollSeekConfiguration
Use to display placeholders if the user scrolls fast through the list.
Set components.ScrollSeekPlaceholder
to change the placeholder content.
followOutput
• Optional
followOutput: FollowOutput
If set to true
, the list automatically scrolls to bottom if the total count is changed.
Set to "smooth"
for an animated scrolling.
By default, followOutput
scrolls down only if the list is already at the bottom.
To implement an arbitrary logic behind that, pass a function:
<Virtuoso
followOutput={(isAtBottom: boolean) => {
if (expression) {
return 'smooth' // can be 'auto' or false to avoid scrolling
} else {
return false
}
}} />
headerFooterTag
• Optional
headerFooterTag: string
Set to customize the wrapper tag for the header and footer components (default is div
).
firstItemIndex
• Optional
firstItemIndex: number
Use when implementing inverse infinite scrolling - decrease the value this property
in combination with data
or totalCount
to prepend items to the top of the list.
Warning: the firstItemIndex should be a positive number, based on the total amount of items to be displayed.
isScrolling
• Optional
isScrolling: (isScrolling
: boolean
) => void
Called when the list starts/stops scrolling.
Type declaration
▸ (isScrolling
): void
Parameters
Name | Type |
---|---|
isScrolling | boolean |
Returns
void
endReached
• Optional
endReached: (index
: number
) => void
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.
Type declaration
▸ (index
): void
Parameters
Name | Type |
---|---|
index | number |
Returns
void
startReached
• Optional
startReached: (index
: number
) => void
Called when the user scrolls to the start of the list.
Type declaration
▸ (index
): void
Parameters
Name | Type |
---|---|
index | number |
Returns
void
rangeChanged
• Optional
rangeChanged: (range
: ListRange
) => void
Called with the new set of items each time the list items are rendered due to scrolling.
Type declaration
▸ (range
): void
Parameters
Name | Type |
---|---|
range | ListRange |
Returns
void
atBottomStateChange
• Optional
atBottomStateChange: (atBottom
: boolean
) => void
Called with true / false when the list has reached the bottom / gets scrolled up.
Can be used to load newer items, like tail -f
.
Type declaration
▸ (atBottom
): void
Parameters
Name | Type |
---|---|
atBottom | boolean |
Returns
void
atTopStateChange
• Optional
atTopStateChange: (atTop
: boolean
) => void
Called with true
/ false
when the list has reached the top / gets scrolled down.
Type declaration
▸ (atTop
): void
Parameters
Name | Type |
---|---|
atTop | boolean |
Returns
void
totalListHeightChanged
• Optional
totalListHeightChanged: (height
: number
) => void
Called when the total list height is changed due to new items or viewport resize.
Type declaration
▸ (height
): void
Parameters
Name | Type |
---|---|
height | number |
Returns
void
itemsRendered
• Optional
itemsRendered: (items
: ListItem
<D
>[]) => void
Called with the new set of items each time the list items are rendered due to scrolling.
Type declaration
▸ (items
): void
Parameters
Name | Type |
---|---|
items | ListItem <D >[] |
Returns
void
alignToBottom
• Optional
alignToBottom: boolean
Setting alignToBottom
to true
aligns the items to the bottom of the list if the list is shorter than the viewport.
Use followOutput
property to keep the list aligned when new items are appended.
useWindowScroll
• Optional
useWindowScroll: boolean
Uses the document scroller rather than wrapping the list in its own.
customScrollParent
• Optional
customScrollParent: HTMLElement
Pass a reference to a scrollable parent element, so that the list won't wrap in its own.
scrollerRef
• Optional
scrollerRef: (ref
: HTMLElement
| Window
) => any
Provides access to the root DOM element
Type declaration
▸ (ref
): any
Parameters
Name | Type |
---|---|
ref | HTMLElement | Window |
Returns
any
atTopThreshold
• Optional
atTopThreshold: number
The property accepts pixel values.
By default 0
. Redefine to change how much away from the top the scroller can be before the list is not considered not at top.
atBottomThreshold
• Optional
atBottomThreshold: number
The property accepts pixel values.
By default 4
. Redefine to change how much away from the bottom the scroller can be before the list is not considered not at bottom.
logLevel
• Optional
logLevel: LogLevel
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.
restoreStateFrom
• Optional
restoreStateFrom: StateSnapshot
pass a state obtained from the getState() method to restore the list state - this includes the previously measured item sizes and the scroll location. Notice that you should still pass the same data and totalCount properties as before, so that the list can match the data with the stored measurements. This is useful when you want to keep the list state when the component is unmounted and remounted, for example when navigating to a different page.
horizontalDirection
• Optional
horizontalDirection: boolean
When set, turns the scroller into a horizontal list. The items are positioned with inline-block
.
skipAnimationFrameInResizeObserver
• Optional
skipAnimationFrameInResizeObserver: boolean
When set, the resize observer used to measure the items will not use requestAnimationFrame
to report the size changes.
Setting this to true will improve performance and reduce flickering, but will cause benign errors to be reported in the console if the size of the items changes while they are being measured.
See https://github.com/petyosi/react-virtuoso/issues/1049 for more information.
className
• Optional
className: string
Inherited from
ListRootProps.className
type
• Optional
type: string
Inherited from
ListRootProps.type
label
• Optional
label: string
Inherited from
ListRootProps.label
id
• Optional
id: string
Inherited from
ListRootProps.id
href
• Optional
href: string
Inherited from
ListRootProps.href
title
• Optional
title: string
Inherited from
ListRootProps.title
name
• Optional
name: string
Inherited from
ListRootProps.name
kind
• Optional
kind: string
Inherited from
ListRootProps.kind
style
• Optional
style: CSSProperties
Inherited from
ListRootProps.style
alt
• Optional
alt: string
Inherited from
ListRootProps.alt
src
• Optional
src: string
Inherited from
ListRootProps.src
width
• Optional
width: string
| number
Inherited from
ListRootProps.width
height
• Optional
height: string
| number
Inherited from
ListRootProps.height
target
• Optional
target: string
Inherited from
ListRootProps.target
color
• Optional
color: string
Inherited from
ListRootProps.color
value
• Optional
value: string
| number
| readonly string
[]
Inherited from
ListRootProps.value
children
• Optional
children: ReactNode
Inherited from
ListRootProps.children
cite
• Optional
cite: string
Inherited from
ListRootProps.cite
form
• Optional
form: string
Inherited from
ListRootProps.form
slot
• Optional
slot: string
Inherited from
ListRootProps.slot
span
• Optional
span: number
Inherited from
ListRootProps.span
summary
• Optional
summary: string
Inherited from
ListRootProps.summary
pattern
• Optional
pattern: string
Inherited from
ListRootProps.pattern
as
• Optional
as: string
Inherited from
ListRootProps.as
sandbox
• Optional
sandbox: string
Inherited from
ListRootProps.sandbox
key
• Optional
key: Key
Inherited from
ListRootProps.key
start
• Optional
start: number
Inherited from
ListRootProps.start
onClick
• Optional
onClick: MouseEventHandler
<HTMLDivElement
>
Inherited from
ListRootProps.onClick
tabIndex
• Optional
tabIndex: number
Inherited from
ListRootProps.tabIndex
accept
• Optional
accept: string
Inherited from
ListRootProps.accept
acceptCharset
• Optional
acceptCharset: string
Inherited from
ListRootProps.acceptCharset
action
• Optional
action: string
Inherited from
ListRootProps.action
allowFullScreen
• Optional
allowFullScreen: boolean
Inherited from
ListRootProps.allowFullScreen
allowTransparency
• Optional
allowTransparency: boolean
Inherited from
ListRootProps.allowTransparency
async
• Optional
async: boolean
Inherited from
ListRootProps.async
autoComplete
• Optional
autoComplete: string
Inherited from
ListRootProps.autoComplete
autoPlay
• Optional
autoPlay: boolean
Inherited from
ListRootProps.autoPlay
capture
• Optional
capture: boolean
| "environment"
| "user"
Inherited from
ListRootProps.capture
cellPadding
• Optional
cellPadding: string
| number
Inherited from
ListRootProps.cellPadding
cellSpacing
• Optional
cellSpacing: string
| number
Inherited from
ListRootProps.cellSpacing
charSet
• Optional
charSet: string
Inherited from
ListRootProps.charSet
challenge
• Optional
challenge: string
Inherited from
ListRootProps.challenge
checked
• Optional
checked: boolean
Inherited from
ListRootProps.checked
classID
• Optional
classID: string
Inherited from
ListRootProps.classID
cols
• Optional
cols: number
Inherited from
ListRootProps.cols
colSpan
• Optional
colSpan: number
Inherited from
ListRootProps.colSpan
controls
• Optional
controls: boolean
Inherited from
ListRootProps.controls
coords
• Optional
coords: string
Inherited from
ListRootProps.coords
crossOrigin
• Optional
crossOrigin: CrossOrigin
Inherited from
ListRootProps.crossOrigin
dateTime
• Optional
dateTime: string
Inherited from
ListRootProps.dateTime
default
• Optional
default: boolean
Inherited from
ListRootProps.default
defer
• Optional
defer: boolean
Inherited from
ListRootProps.defer
disabled
• Optional
disabled: boolean
Inherited from
ListRootProps.disabled
download
• Optional
download: any
Inherited from
ListRootProps.download
encType
• Optional
encType: string
Inherited from
ListRootProps.encType
formAction
• Optional
formAction: string
Inherited from
ListRootProps.formAction
formEncType
• Optional
formEncType: string
Inherited from
ListRootProps.formEncType
formMethod
• Optional
formMethod: string
Inherited from
ListRootProps.formMethod
formNoValidate
• Optional
formNoValidate: boolean
Inherited from
ListRootProps.formNoValidate
formTarget
• Optional
formTarget: string
Inherited from
ListRootProps.formTarget
frameBorder
• Optional
frameBorder: string
| number
Inherited from
ListRootProps.frameBorder
headers
• Optional
headers: string
Inherited from
ListRootProps.headers
high
• Optional
high: number
Inherited from
ListRootProps.high
hrefLang
• Optional
hrefLang: string
Inherited from
ListRootProps.hrefLang
htmlFor
• Optional
htmlFor: string
Inherited from
ListRootProps.htmlFor
httpEquiv
• Optional
httpEquiv: string
Inherited from
ListRootProps.httpEquiv
integrity
• Optional
integrity: string
Inherited from
ListRootProps.integrity
keyParams
• Optional
keyParams: string
Inherited from
ListRootProps.keyParams
keyType
• Optional
keyType: string
Inherited from
ListRootProps.keyType
list
• Optional
list: string
Inherited from
ListRootProps.list
loop
• Optional
loop: boolean
Inherited from
ListRootProps.loop
low
• Optional
low: number
Inherited from
ListRootProps.low
manifest
• Optional
manifest: string
Inherited from
ListRootProps.manifest
marginHeight
• Optional
marginHeight: number
Inherited from
ListRootProps.marginHeight
marginWidth
• Optional
marginWidth: number
Inherited from
ListRootProps.marginWidth
max
• Optional
max: string
| number
Inherited from
ListRootProps.max
maxLength
• Optional
maxLength: number
Inherited from
ListRootProps.maxLength
media
• Optional
media: string
Inherited from
ListRootProps.media
mediaGroup
• Optional
mediaGroup: string
Inherited from
ListRootProps.mediaGroup
method
• Optional
method: string
Inherited from
ListRootProps.method
min
• Optional
min: string
| number
Inherited from
ListRootProps.min
minLength
• Optional
minLength: number
Inherited from
ListRootProps.minLength
multiple
• Optional
multiple: boolean
Inherited from
ListRootProps.multiple
muted
• Optional
muted: boolean
Inherited from
ListRootProps.muted
noValidate
• Optional
noValidate: boolean
Inherited from
ListRootProps.noValidate
open
• Optional
open: boolean
Inherited from
ListRootProps.open
optimum
• Optional
optimum: number
Inherited from
ListRootProps.optimum
placeholder
• Optional
placeholder: string
Inherited from
ListRootProps.placeholder
playsInline
• Optional
playsInline: boolean
Inherited from
ListRootProps.playsInline
poster
• Optional
poster: string
Inherited from
ListRootProps.poster
preload
• Optional
preload: string
Inherited from
ListRootProps.preload
readOnly
• Optional
readOnly: boolean
Inherited from
ListRootProps.readOnly
required
• Optional
required: boolean
Inherited from
ListRootProps.required
reversed
• Optional
reversed: boolean
Inherited from
ListRootProps.reversed
rows
• Optional
rows: number
Inherited from
ListRootProps.rows
rowSpan
• Optional
rowSpan: number
Inherited from
ListRootProps.rowSpan
scope
• Optional
scope: string
Inherited from
ListRootProps.scope
scoped
• Optional
scoped: boolean
Inherited from
ListRootProps.scoped
scrolling
• Optional
scrolling: string
Inherited from
ListRootProps.scrolling
seamless
• Optional
seamless: boolean
Inherited from
ListRootProps.seamless
selected
• Optional
selected: boolean
Inherited from
ListRootProps.selected
shape
• Optional
shape: string
Inherited from
ListRootProps.shape
size
• Optional
size: number
Inherited from
ListRootProps.size
sizes
• Optional
sizes: string
Inherited from
ListRootProps.sizes
srcDoc
• Optional
srcDoc: string
Inherited from
ListRootProps.srcDoc
srcLang
• Optional
srcLang: string
Inherited from
ListRootProps.srcLang
srcSet
• Optional
srcSet: string
Inherited from
ListRootProps.srcSet
step
• Optional
step: string
| number
Inherited from
ListRootProps.step
useMap
• Optional
useMap: string
Inherited from
ListRootProps.useMap
wmode
• Optional
wmode: string
Inherited from
ListRootProps.wmode
wrap
• Optional
wrap: string
Inherited from
ListRootProps.wrap
defaultChecked
• Optional
defaultChecked: boolean
Inherited from
ListRootProps.defaultChecked
defaultValue
• Optional
defaultValue: string
| number
| readonly string
[]
Inherited from
ListRootProps.defaultValue
suppressContentEditableWarning
• Optional
suppressContentEditableWarning: boolean
Inherited from
ListRootProps.suppressContentEditableWarning
suppressHydrationWarning
• Optional
suppressHydrationWarning: boolean
Inherited from
ListRootProps.suppressHydrationWarning
accessKey
• Optional
accessKey: string
Inherited from
ListRootProps.accessKey
autoFocus
• Optional
autoFocus: boolean
Inherited from
ListRootProps.autoFocus
contentEditable
• Optional
contentEditable: "inherit"
| Booleanish
| "plaintext-only"
Inherited from
ListRootProps.contentEditable