Skip to main content

Interface: GroupedVirtuosoProps<D, C>

Extends​

Type Parameters​

D​

D

C​

C

Properties​

firstItemIndex?​

optional firstItemIndex: number

Use when implementing inverse infinite scrolling, decrease the value this property in combination with a change in groupCounts to prepend groups items to the top of the list. Both new groups and extending the top group is supported.

The delta of the firstItemIndex should equal the amount of new items introduced, without the group themselves. As an example, if you prepend 2 groups with 20 and 30 items each, the firstItemIndex should be decreased with 50.

You can also prepend more items to the first group, for example: { groupCounts: [20, 30], firstItemIndex: 1000 } can become { groupCounts: [10, 30, 30], firstItemIndex: 980 }

Warning: the firstItemIndex should be a positive number, based on the total amount of items to be displayed.

Overrides​

Omit.firstItemIndex

groupContent?​

optional groupContent: GroupContent<C>

Specifies how each each group header gets rendered. The callback receives the zero-based index of the group.

groupCounts?​

optional groupCounts: number[]

Specifies the amount of items in each group (and, actually, how many groups are there). For example, passing [20, 30] will display 2 groups with 20 and 30 items each.

itemContent?​

optional itemContent: GroupItemContent<D, C>

Specifies how each each item gets rendered.

start?​

optional start: number

Inherited from​

Omit.start

cite?​

optional cite: string

Inherited from​

Omit.cite

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.

Inherited from​

Omit.data

form?​

optional form: string

Inherited from​

Omit.form

label?​

optional label: string

Inherited from​

Omit.label

slot?​

optional slot: string

Inherited from​

Omit.slot

span?​

optional span: number

Inherited from​

Omit.span

style?​

optional style: CSSProperties

Inherited from​

Omit.style

summary?​

optional summary: string

Inherited from​

Omit.summary

title?​

optional title: string

Inherited from​

Omit.title

pattern?​

optional pattern: string

Inherited from​

Omit.pattern

children?​

optional children: ReactNode

Inherited from​

Omit.children

tabIndex?​

optional tabIndex: number

Inherited from​

Omit.tabIndex

className?​

optional className: string

Inherited from​

Omit.className

key?​

optional key: null | Key

Inherited from​

Omit.key

defaultChecked?​

optional defaultChecked: boolean

Inherited from​

Omit.defaultChecked

defaultValue?​

optional defaultValue: string | number | readonly string[]

Inherited from​

Omit.defaultValue

suppressContentEditableWarning?​

optional suppressContentEditableWarning: boolean

Inherited from​

Omit.suppressContentEditableWarning

suppressHydrationWarning?​

optional suppressHydrationWarning: boolean

Inherited from​

Omit.suppressHydrationWarning

accessKey?​

optional accessKey: string

Inherited from​

Omit.accessKey

autoCapitalize?​

optional autoCapitalize: "none" | string & object | "off" | "on" | "sentences" | "words" | "characters"

Inherited from​

Omit.autoCapitalize

autoFocus?​

optional autoFocus: boolean

Inherited from​

Omit.autoFocus

contentEditable?​

optional contentEditable: "inherit" | Booleanish | "plaintext-only"

Inherited from​

Omit.contentEditable

contextMenu?​

optional contextMenu: string

Inherited from​

Omit.contextMenu

dir?​

optional dir: string

Inherited from​

Omit.dir

draggable?​

optional draggable: Booleanish

Inherited from​

Omit.draggable

enterKeyHint?​

optional enterKeyHint: "search" | "next" | "done" | "enter" | "go" | "previous" | "send"

Inherited from​

Omit.enterKeyHint

hidden?​

optional hidden: boolean

Inherited from​

Omit.hidden

id?​

optional id: string

Inherited from​

Omit.id

lang?​

optional lang: string

Inherited from​

Omit.lang

nonce?​

optional nonce: string

Inherited from​

Omit.nonce

spellCheck?​

optional spellCheck: Booleanish

Inherited from​

Omit.spellCheck

translate?​

optional translate: "yes" | "no"

Inherited from​

Omit.translate

radioGroup?​

optional radioGroup: string

Inherited from​

Omit.radioGroup

role?​

optional role: AriaRole

Inherited from​

Omit.role

about?​

optional about: string

Inherited from​

Omit.about

content?​

optional content: string

Inherited from​

Omit.content

datatype?​

optional datatype: string

Inherited from​

Omit.datatype

inlist?​

optional inlist: any

Inherited from​

Omit.inlist

prefix?​

optional prefix: string

Inherited from​

Omit.prefix

property?​

optional property: string

Inherited from​

Omit.property

rel?​

optional rel: string

Inherited from​

Omit.rel

resource?​

optional resource: string

Inherited from​

Omit.resource

rev?​

optional rev: string

Inherited from​

Omit.rev

typeof?​

optional typeof: string

Inherited from​

Omit.typeof

vocab?​

optional vocab: string

Inherited from​

Omit.vocab

autoCorrect?​

optional autoCorrect: string

Inherited from​

Omit.autoCorrect

autoSave?​

optional autoSave: string

Inherited from​

Omit.autoSave

color?​

optional color: string

Inherited from​

Omit.color

itemProp?​

optional itemProp: string

Inherited from​

Omit.itemProp

itemScope?​

optional itemScope: boolean

Inherited from​

Omit.itemScope

itemType?​

optional itemType: string

Inherited from​

Omit.itemType

itemID?​

optional itemID: string

Inherited from​

Omit.itemID

itemRef?​

optional itemRef: string

Inherited from​

Omit.itemRef

results?​

optional results: number

Inherited from​

Omit.results

security?​

optional security: string

Inherited from​

Omit.security

unselectable?​

optional unselectable: "off" | "on"

Inherited from​

Omit.unselectable

inputMode?​

optional inputMode: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"

Hints at the type of data that might be entered by the user while editing the element or its contents

See​

https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute

Inherited from​

Omit.inputMode

is?​

optional is: string

Specify that a standard HTML element should behave like a defined custom built-in element

See​

https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is

Inherited from​

Omit.is

exportparts?​

optional exportparts: string

See​

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts

Inherited from​

Omit.exportparts

part?​

optional part: string

See​

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part

Inherited from​

Omit.part

aria-activedescendant?​

optional aria-activedescendant: string

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

Inherited from​

Omit.aria-activedescendant

aria-atomic?​

optional aria-atomic: Booleanish

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

Inherited from​

Omit.aria-atomic

aria-autocomplete?​

optional aria-autocomplete: "list" | "none" | "inline" | "both"

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.

Inherited from​

Omit.aria-autocomplete

aria-braillelabel?​

optional aria-braillelabel: string

Defines a string value that labels the current element, which is intended to be converted into Braille.

See​

aria-label.

Inherited from​

Omit.aria-braillelabel

aria-brailleroledescription?​

optional aria-brailleroledescription: string

Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.

See​

aria-roledescription.

Inherited from​

Omit.aria-brailleroledescription

aria-busy?​

optional aria-busy: Booleanish

Inherited from​

Omit.aria-busy

aria-checked?​

optional aria-checked: boolean | "mixed" | "false" | "true"

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

See​

  • aria-pressed
  • aria-selected.

Inherited from​

Omit.aria-checked

aria-colcount?​

optional aria-colcount: number

Defines the total number of columns in a table, grid, or treegrid.

See​

aria-colindex.

Inherited from​

Omit.aria-colcount

aria-colindex?​

optional aria-colindex: number

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

See​

  • aria-colcount
  • aria-colspan.

Inherited from​

Omit.aria-colindex

aria-colindextext?​

optional aria-colindextext: string

Defines a human readable text alternative of aria-colindex.

See​

aria-rowindextext.

Inherited from​

Omit.aria-colindextext

aria-colspan?​

optional aria-colspan: number

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

See​

  • aria-colindex
  • aria-rowspan.

Inherited from​

Omit.aria-colspan

aria-controls?​

optional aria-controls: string

Identifies the element (or elements) whose contents or presence are controlled by the current element.

See​

aria-owns.

Inherited from​

Omit.aria-controls

aria-current?​

optional aria-current: boolean | "time" | "step" | "location" | "page" | "false" | "true" | "date"

Indicates the element that represents the current item within a container or set of related elements.

Inherited from​

Omit.aria-current

aria-describedby?​

optional aria-describedby: string

Identifies the element (or elements) that describes the object.

See​

aria-labelledby

Inherited from​

Omit.aria-describedby

aria-description?​

optional aria-description: string

Defines a string value that describes or annotates the current element.

See​

related aria-describedby.

Inherited from​

Omit.aria-description

aria-details?​

optional aria-details: string

Identifies the element that provides a detailed, extended description for the object.

See​

aria-describedby.

Inherited from​

Omit.aria-details

aria-disabled?​

optional aria-disabled: Booleanish

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

See​

  • aria-hidden
  • aria-readonly.

Inherited from​

Omit.aria-disabled

aria-dropeffect?​

optional aria-dropeffect: "link" | "copy" | "none" | "move" | "execute" | "popup"

Indicates what functions can be performed when a dragged object is released on the drop target.

Deprecated​

in ARIA 1.1

Inherited from​

Omit.aria-dropeffect

aria-errormessage?​

optional aria-errormessage: string

Identifies the element that provides an error message for the object.

See​

  • aria-invalid
  • aria-describedby.

Inherited from​

Omit.aria-errormessage

aria-expanded?​

optional aria-expanded: Booleanish

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

Inherited from​

Omit.aria-expanded

aria-flowto?​

optional aria-flowto: string

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.

Inherited from​

Omit.aria-flowto

aria-grabbed?​

optional aria-grabbed: Booleanish

Indicates an element's "grabbed" state in a drag-and-drop operation.

Deprecated​

in ARIA 1.1

Inherited from​

Omit.aria-grabbed

aria-haspopup?​

optional aria-haspopup: boolean | "dialog" | "menu" | "grid" | "listbox" | "false" | "true" | "tree"

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

Inherited from​

Omit.aria-haspopup

aria-hidden?​

optional aria-hidden: Booleanish

Indicates whether the element is exposed to an accessibility API.

See​

aria-disabled.

Inherited from​

Omit.aria-hidden

aria-invalid?​

optional aria-invalid: boolean | "false" | "true" | "grammar" | "spelling"

Indicates the entered value does not conform to the format expected by the application.

See​

aria-errormessage.

Inherited from​

Omit.aria-invalid

aria-keyshortcuts?​

optional aria-keyshortcuts: string

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

Inherited from​

Omit.aria-keyshortcuts

aria-label?​

optional aria-label: string

Defines a string value that labels the current element.

See​

aria-labelledby.

Inherited from​

Omit.aria-label

aria-labelledby?​

optional aria-labelledby: string

Identifies the element (or elements) that labels the current element.

See​

aria-describedby.

Inherited from​

Omit.aria-labelledby

aria-level?​

optional aria-level: number

Defines the hierarchical level of an element within a structure.

Inherited from​

Omit.aria-level

aria-live?​

optional aria-live: "off" | "assertive" | "polite"

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

Inherited from​

Omit.aria-live

aria-modal?​

optional aria-modal: Booleanish

Indicates whether an element is modal when displayed.

Inherited from​

Omit.aria-modal

aria-multiline?​

optional aria-multiline: Booleanish

Indicates whether a text box accepts multiple lines of input or only a single line.

Inherited from​

Omit.aria-multiline

aria-multiselectable?​

optional aria-multiselectable: Booleanish

Indicates that the user may select more than one item from the current selectable descendants.

Inherited from​

Omit.aria-multiselectable

aria-orientation?​

optional aria-orientation: "horizontal" | "vertical"

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

Inherited from​

Omit.aria-orientation

aria-owns?​

optional aria-owns: string

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.

See​

aria-controls.

Inherited from​

Omit.aria-owns

aria-placeholder?​

optional aria-placeholder: string

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.

Inherited from​

Omit.aria-placeholder

aria-posinset?​

optional aria-posinset: number

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

See​

aria-setsize.

Inherited from​

Omit.aria-posinset

aria-pressed?​

optional aria-pressed: boolean | "mixed" | "false" | "true"

Indicates the current "pressed" state of toggle buttons.

See​

  • aria-checked
  • aria-selected.

Inherited from​

Omit.aria-pressed

aria-readonly?​

optional aria-readonly: Booleanish

Indicates that the element is not editable, but is otherwise operable.

See​

aria-disabled.

Inherited from​

Omit.aria-readonly

aria-relevant?​

optional aria-relevant: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

See​

aria-atomic.

Inherited from​

Omit.aria-relevant

aria-required?​

optional aria-required: Booleanish

Indicates that user input is required on the element before a form may be submitted.

Inherited from​

Omit.aria-required

aria-roledescription?​

optional aria-roledescription: string

Defines a human-readable, author-localized description for the role of an element.

Inherited from​

Omit.aria-roledescription

aria-rowcount?​

optional aria-rowcount: number

Defines the total number of rows in a table, grid, or treegrid.

See​

aria-rowindex.

Inherited from​

Omit.aria-rowcount

aria-rowindex?​

optional aria-rowindex: number

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

See​

  • aria-rowcount
  • aria-rowspan.

Inherited from​

Omit.aria-rowindex

aria-rowindextext?​

optional aria-rowindextext: string

Defines a human readable text alternative of aria-rowindex.

See​

aria-colindextext.

Inherited from​

Omit.aria-rowindextext

aria-rowspan?​

optional aria-rowspan: number

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

See​

  • aria-rowindex
  • aria-colspan.

Inherited from​

Omit.aria-rowspan

aria-selected?​

optional aria-selected: Booleanish

Indicates the current "selected" state of various widgets.

See​

  • aria-checked
  • aria-pressed.

Inherited from​

Omit.aria-selected

aria-setsize?​

optional aria-setsize: number

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

See​

aria-posinset.

Inherited from​

Omit.aria-setsize

aria-sort?​

optional aria-sort: "none" | "ascending" | "descending" | "other"

Indicates if items in a table or grid are sorted in ascending or descending order.

Inherited from​

Omit.aria-sort

aria-valuemax?​

optional aria-valuemax: number

Defines the maximum allowed value for a range widget.

Inherited from​

Omit.aria-valuemax

aria-valuemin?​

optional aria-valuemin: number

Defines the minimum allowed value for a range widget.

Inherited from​

Omit.aria-valuemin

aria-valuenow?​

optional aria-valuenow: number

Defines the current value for a range widget.

See​

aria-valuetext.

Inherited from​

Omit.aria-valuenow

aria-valuetext?​

optional aria-valuetext: string

Defines the human readable text alternative of aria-valuenow for a range widget.

Inherited from​

Omit.aria-valuetext

dangerouslySetInnerHTML?​

optional dangerouslySetInnerHTML: object

__html​

__html: string | TrustedHTML

Inherited from​

Omit.dangerouslySetInnerHTML

onCopy?​

optional onCopy: ClipboardEventHandler<HTMLDivElement>

Inherited from​

Omit.onCopy

onCopyCapture?​

optional onCopyCapture: ClipboardEventHandler<HTMLDivElement>

Inherited from​

Omit.onCopyCapture

onCut?​

optional onCut: ClipboardEventHandler<HTMLDivElement>

Inherited from​

Omit.onCut

onCutCapture?​

optional onCutCapture: ClipboardEventHandler<HTMLDivElement>

Inherited from​

Omit.onCutCapture

onPaste?​

optional onPaste: ClipboardEventHandler<HTMLDivElement>

Inherited from​

Omit.onPaste

onPasteCapture?​

optional onPasteCapture: ClipboardEventHandler<HTMLDivElement>

Inherited from​

Omit.onPasteCapture

onCompositionEnd?​

optional onCompositionEnd: CompositionEventHandler<HTMLDivElement>

Inherited from​

Omit.onCompositionEnd

onCompositionEndCapture?​

optional onCompositionEndCapture: CompositionEventHandler<HTMLDivElement>

Inherited from​

Omit.onCompositionEndCapture

onCompositionStart?​

optional onCompositionStart: CompositionEventHandler<HTMLDivElement>

Inherited from​

Omit.onCompositionStart

onCompositionStartCapture?​

optional onCompositionStartCapture: CompositionEventHandler<HTMLDivElement>

Inherited from​

Omit.onCompositionStartCapture

onCompositionUpdate?​

optional onCompositionUpdate: CompositionEventHandler<HTMLDivElement>

Inherited from​

Omit.onCompositionUpdate

onCompositionUpdateCapture?​

optional onCompositionUpdateCapture: CompositionEventHandler<HTMLDivElement>

Inherited from​

Omit.onCompositionUpdateCapture

onFocus?​

optional onFocus: FocusEventHandler<HTMLDivElement>

Inherited from​

Omit.onFocus

onFocusCapture?​

optional onFocusCapture: FocusEventHandler<HTMLDivElement>

Inherited from​

Omit.onFocusCapture

onBlur?​

optional onBlur: FocusEventHandler<HTMLDivElement>

Inherited from​

Omit.onBlur

onBlurCapture?​

optional onBlurCapture: FocusEventHandler<HTMLDivElement>

Inherited from​

Omit.onBlurCapture

onChange?​

optional onChange: FormEventHandler<HTMLDivElement>

Inherited from​

Omit.onChange

onChangeCapture?​

optional onChangeCapture: FormEventHandler<HTMLDivElement>

Inherited from​

Omit.onChangeCapture

onBeforeInput?​

optional onBeforeInput: InputEventHandler<HTMLDivElement>

Inherited from​

Omit.onBeforeInput

onBeforeInputCapture?​

optional onBeforeInputCapture: FormEventHandler<HTMLDivElement>

Inherited from​

Omit.onBeforeInputCapture

onInput?​

optional onInput: FormEventHandler<HTMLDivElement>

Inherited from​

Omit.onInput

onInputCapture?​

optional onInputCapture: FormEventHandler<HTMLDivElement>

Inherited from​

Omit.onInputCapture

onReset?​

optional onReset: FormEventHandler<HTMLDivElement>

Inherited from​

Omit.onReset

onResetCapture?​

optional onResetCapture: FormEventHandler<HTMLDivElement>

Inherited from​

Omit.onResetCapture

onSubmit?​

optional onSubmit: FormEventHandler<HTMLDivElement>

Inherited from​

Omit.onSubmit

onSubmitCapture?​

optional onSubmitCapture: FormEventHandler<HTMLDivElement>

Inherited from​

Omit.onSubmitCapture

onInvalid?​

optional onInvalid: FormEventHandler<HTMLDivElement>

Inherited from​

Omit.onInvalid

onInvalidCapture?​

optional onInvalidCapture: FormEventHandler<HTMLDivElement>

Inherited from​

Omit.onInvalidCapture

onLoad?​

optional onLoad: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onLoad

onLoadCapture?​

optional onLoadCapture: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onLoadCapture

onError?​

optional onError: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onError

onErrorCapture?​

optional onErrorCapture: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onErrorCapture

onKeyDown?​

optional onKeyDown: KeyboardEventHandler<HTMLDivElement>

Inherited from​

Omit.onKeyDown

onKeyDownCapture?​

optional onKeyDownCapture: KeyboardEventHandler<HTMLDivElement>

Inherited from​

Omit.onKeyDownCapture

onKeyPress?​

optional onKeyPress: KeyboardEventHandler<HTMLDivElement>

Deprecated​

Use onKeyUp or onKeyDown instead

Inherited from​

Omit.onKeyPress

onKeyPressCapture?​

optional onKeyPressCapture: KeyboardEventHandler<HTMLDivElement>

Deprecated​

Use onKeyUpCapture or onKeyDownCapture instead

Inherited from​

Omit.onKeyPressCapture

onKeyUp?​

optional onKeyUp: KeyboardEventHandler<HTMLDivElement>

Inherited from​

Omit.onKeyUp

onKeyUpCapture?​

optional onKeyUpCapture: KeyboardEventHandler<HTMLDivElement>

Inherited from​

Omit.onKeyUpCapture

onAbort?​

optional onAbort: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onAbort

onAbortCapture?​

optional onAbortCapture: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onAbortCapture

onCanPlay?​

optional onCanPlay: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onCanPlay

onCanPlayCapture?​

optional onCanPlayCapture: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onCanPlayCapture

onCanPlayThrough?​

optional onCanPlayThrough: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onCanPlayThrough

onCanPlayThroughCapture?​

optional onCanPlayThroughCapture: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onCanPlayThroughCapture

onDurationChange?​

optional onDurationChange: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onDurationChange

onDurationChangeCapture?​

optional onDurationChangeCapture: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onDurationChangeCapture

onEmptied?​

optional onEmptied: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onEmptied

onEmptiedCapture?​

optional onEmptiedCapture: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onEmptiedCapture

onEncrypted?​

optional onEncrypted: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onEncrypted

onEncryptedCapture?​

optional onEncryptedCapture: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onEncryptedCapture

onEnded?​

optional onEnded: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onEnded

onEndedCapture?​

optional onEndedCapture: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onEndedCapture

onLoadedData?​

optional onLoadedData: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onLoadedData

onLoadedDataCapture?​

optional onLoadedDataCapture: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onLoadedDataCapture

onLoadedMetadata?​

optional onLoadedMetadata: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onLoadedMetadata

onLoadedMetadataCapture?​

optional onLoadedMetadataCapture: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onLoadedMetadataCapture

onLoadStart?​

optional onLoadStart: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onLoadStart

onLoadStartCapture?​

optional onLoadStartCapture: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onLoadStartCapture

onPause?​

optional onPause: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onPause

onPauseCapture?​

optional onPauseCapture: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onPauseCapture

onPlay?​

optional onPlay: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onPlay

onPlayCapture?​

optional onPlayCapture: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onPlayCapture

onPlaying?​

optional onPlaying: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onPlaying

onPlayingCapture?​

optional onPlayingCapture: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onPlayingCapture

onProgress?​

optional onProgress: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onProgress

onProgressCapture?​

optional onProgressCapture: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onProgressCapture

onRateChange?​

optional onRateChange: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onRateChange

onRateChangeCapture?​

optional onRateChangeCapture: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onRateChangeCapture

onSeeked?​

optional onSeeked: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onSeeked

onSeekedCapture?​

optional onSeekedCapture: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onSeekedCapture

onSeeking?​

optional onSeeking: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onSeeking

onSeekingCapture?​

optional onSeekingCapture: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onSeekingCapture

onStalled?​

optional onStalled: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onStalled

onStalledCapture?​

optional onStalledCapture: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onStalledCapture

onSuspend?​

optional onSuspend: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onSuspend

onSuspendCapture?​

optional onSuspendCapture: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onSuspendCapture

onTimeUpdate?​

optional onTimeUpdate: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onTimeUpdate

onTimeUpdateCapture?​

optional onTimeUpdateCapture: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onTimeUpdateCapture

onVolumeChange?​

optional onVolumeChange: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onVolumeChange

onVolumeChangeCapture?​

optional onVolumeChangeCapture: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onVolumeChangeCapture

onWaiting?​

optional onWaiting: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onWaiting

onWaitingCapture?​

optional onWaitingCapture: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onWaitingCapture

onAuxClick?​

optional onAuxClick: MouseEventHandler<HTMLDivElement>

Inherited from​

Omit.onAuxClick

onAuxClickCapture?​

optional onAuxClickCapture: MouseEventHandler<HTMLDivElement>

Inherited from​

Omit.onAuxClickCapture

onClick?​

optional onClick: MouseEventHandler<HTMLDivElement>

Inherited from​

Omit.onClick

onClickCapture?​

optional onClickCapture: MouseEventHandler<HTMLDivElement>

Inherited from​

Omit.onClickCapture

onContextMenu?​

optional onContextMenu: MouseEventHandler<HTMLDivElement>

Inherited from​

Omit.onContextMenu

onContextMenuCapture?​

optional onContextMenuCapture: MouseEventHandler<HTMLDivElement>

Inherited from​

Omit.onContextMenuCapture

onDoubleClick?​

optional onDoubleClick: MouseEventHandler<HTMLDivElement>

Inherited from​

Omit.onDoubleClick

onDoubleClickCapture?​

optional onDoubleClickCapture: MouseEventHandler<HTMLDivElement>

Inherited from​

Omit.onDoubleClickCapture

onDrag?​

optional onDrag: DragEventHandler<HTMLDivElement>

Inherited from​

Omit.onDrag

onDragCapture?​

optional onDragCapture: DragEventHandler<HTMLDivElement>

Inherited from​

Omit.onDragCapture

onDragEnd?​

optional onDragEnd: DragEventHandler<HTMLDivElement>

Inherited from​

Omit.onDragEnd

onDragEndCapture?​

optional onDragEndCapture: DragEventHandler<HTMLDivElement>

Inherited from​

Omit.onDragEndCapture

onDragEnter?​

optional onDragEnter: DragEventHandler<HTMLDivElement>

Inherited from​

Omit.onDragEnter

onDragEnterCapture?​

optional onDragEnterCapture: DragEventHandler<HTMLDivElement>

Inherited from​

Omit.onDragEnterCapture

onDragExit?​

optional onDragExit: DragEventHandler<HTMLDivElement>

Inherited from​

Omit.onDragExit

onDragExitCapture?​

optional onDragExitCapture: DragEventHandler<HTMLDivElement>

Inherited from​

Omit.onDragExitCapture

onDragLeave?​

optional onDragLeave: DragEventHandler<HTMLDivElement>

Inherited from​

Omit.onDragLeave

onDragLeaveCapture?​

optional onDragLeaveCapture: DragEventHandler<HTMLDivElement>

Inherited from​

Omit.onDragLeaveCapture

onDragOver?​

optional onDragOver: DragEventHandler<HTMLDivElement>

Inherited from​

Omit.onDragOver

onDragOverCapture?​

optional onDragOverCapture: DragEventHandler<HTMLDivElement>

Inherited from​

Omit.onDragOverCapture

onDragStart?​

optional onDragStart: DragEventHandler<HTMLDivElement>

Inherited from​

Omit.onDragStart

onDragStartCapture?​

optional onDragStartCapture: DragEventHandler<HTMLDivElement>

Inherited from​

Omit.onDragStartCapture

onDrop?​

optional onDrop: DragEventHandler<HTMLDivElement>

Inherited from​

Omit.onDrop

onDropCapture?​

optional onDropCapture: DragEventHandler<HTMLDivElement>

Inherited from​

Omit.onDropCapture

onMouseDown?​

optional onMouseDown: MouseEventHandler<HTMLDivElement>

Inherited from​

Omit.onMouseDown

onMouseDownCapture?​

optional onMouseDownCapture: MouseEventHandler<HTMLDivElement>

Inherited from​

Omit.onMouseDownCapture

onMouseEnter?​

optional onMouseEnter: MouseEventHandler<HTMLDivElement>

Inherited from​

Omit.onMouseEnter

onMouseLeave?​

optional onMouseLeave: MouseEventHandler<HTMLDivElement>

Inherited from​

Omit.onMouseLeave

onMouseMove?​

optional onMouseMove: MouseEventHandler<HTMLDivElement>

Inherited from​

Omit.onMouseMove

onMouseMoveCapture?​

optional onMouseMoveCapture: MouseEventHandler<HTMLDivElement>

Inherited from​

Omit.onMouseMoveCapture

onMouseOut?​

optional onMouseOut: MouseEventHandler<HTMLDivElement>

Inherited from​

Omit.onMouseOut

onMouseOutCapture?​

optional onMouseOutCapture: MouseEventHandler<HTMLDivElement>

Inherited from​

Omit.onMouseOutCapture

onMouseOver?​

optional onMouseOver: MouseEventHandler<HTMLDivElement>

Inherited from​

Omit.onMouseOver

onMouseOverCapture?​

optional onMouseOverCapture: MouseEventHandler<HTMLDivElement>

Inherited from​

Omit.onMouseOverCapture

onMouseUp?​

optional onMouseUp: MouseEventHandler<HTMLDivElement>

Inherited from​

Omit.onMouseUp

onMouseUpCapture?​

optional onMouseUpCapture: MouseEventHandler<HTMLDivElement>

Inherited from​

Omit.onMouseUpCapture

onSelect?​

optional onSelect: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onSelect

onSelectCapture?​

optional onSelectCapture: ReactEventHandler<HTMLDivElement>

Inherited from​

Omit.onSelectCapture

onTouchCancel?​

optional onTouchCancel: TouchEventHandler<HTMLDivElement>

Inherited from​

Omit.onTouchCancel

onTouchCancelCapture?​

optional onTouchCancelCapture: TouchEventHandler<HTMLDivElement>

Inherited from​

Omit.onTouchCancelCapture

onTouchEnd?​

optional onTouchEnd: TouchEventHandler<HTMLDivElement>

Inherited from​

Omit.onTouchEnd

onTouchEndCapture?​

optional onTouchEndCapture: TouchEventHandler<HTMLDivElement>

Inherited from​

Omit.onTouchEndCapture

onTouchMove?​

optional onTouchMove: TouchEventHandler<HTMLDivElement>

Inherited from​

Omit.onTouchMove

onTouchMoveCapture?​

optional onTouchMoveCapture: TouchEventHandler<HTMLDivElement>

Inherited from​

Omit.onTouchMoveCapture

onTouchStart?​

optional onTouchStart: TouchEventHandler<HTMLDivElement>

Inherited from​

Omit.onTouchStart

onTouchStartCapture?​

optional onTouchStartCapture: TouchEventHandler<HTMLDivElement>

Inherited from​

Omit.onTouchStartCapture

onPointerDown?​

optional onPointerDown: PointerEventHandler<HTMLDivElement>

Inherited from​

Omit.onPointerDown

onPointerDownCapture?​

optional onPointerDownCapture: PointerEventHandler<HTMLDivElement>

Inherited from​

Omit.onPointerDownCapture

onPointerMove?​

optional onPointerMove: PointerEventHandler<HTMLDivElement>

Inherited from​

Omit.onPointerMove

onPointerMoveCapture?​

optional onPointerMoveCapture: PointerEventHandler<HTMLDivElement>

Inherited from​

Omit.onPointerMoveCapture

onPointerUp?​

optional onPointerUp: PointerEventHandler<HTMLDivElement>

Inherited from​

Omit.onPointerUp

onPointerUpCapture?​

optional onPointerUpCapture: PointerEventHandler<HTMLDivElement>

Inherited from​

Omit.onPointerUpCapture

onPointerCancel?​

optional onPointerCancel: PointerEventHandler<HTMLDivElement>

Inherited from​

Omit.onPointerCancel

onPointerCancelCapture?​

optional onPointerCancelCapture: PointerEventHandler<HTMLDivElement>

Inherited from​

Omit.onPointerCancelCapture

onPointerEnter?​

optional onPointerEnter: PointerEventHandler<HTMLDivElement>

Inherited from​

Omit.onPointerEnter

onPointerLeave?​

optional onPointerLeave: PointerEventHandler<HTMLDivElement>

Inherited from​

Omit.onPointerLeave

onPointerOver?​

optional onPointerOver: PointerEventHandler<HTMLDivElement>

Inherited from​

Omit.onPointerOver

onPointerOverCapture?​

optional onPointerOverCapture: PointerEventHandler<HTMLDivElement>

Inherited from​

Omit.onPointerOverCapture

onPointerOut?​

optional onPointerOut: PointerEventHandler<HTMLDivElement>

Inherited from​

Omit.onPointerOut

onPointerOutCapture?​

optional onPointerOutCapture: PointerEventHandler<HTMLDivElement>

Inherited from​

Omit.onPointerOutCapture

onGotPointerCapture?​

optional onGotPointerCapture: PointerEventHandler<HTMLDivElement>

Inherited from​

Omit.onGotPointerCapture

onGotPointerCaptureCapture?​

optional onGotPointerCaptureCapture: PointerEventHandler<HTMLDivElement>

Inherited from​

Omit.onGotPointerCaptureCapture

onLostPointerCapture?​

optional onLostPointerCapture: PointerEventHandler<HTMLDivElement>

Inherited from​

Omit.onLostPointerCapture

onLostPointerCaptureCapture?​

optional onLostPointerCaptureCapture: PointerEventHandler<HTMLDivElement>

Inherited from​

Omit.onLostPointerCaptureCapture

onScroll?​

optional onScroll: UIEventHandler<HTMLDivElement>

Inherited from​

Omit.onScroll

onScrollCapture?​

optional onScrollCapture: UIEventHandler<HTMLDivElement>

Inherited from​

Omit.onScrollCapture

onWheel?​

optional onWheel: WheelEventHandler<HTMLDivElement>

Inherited from​

Omit.onWheel

onWheelCapture?​

optional onWheelCapture: WheelEventHandler<HTMLDivElement>

Inherited from​

Omit.onWheelCapture

onAnimationStart?​

optional onAnimationStart: AnimationEventHandler<HTMLDivElement>

Inherited from​

Omit.onAnimationStart

onAnimationStartCapture?​

optional onAnimationStartCapture: AnimationEventHandler<HTMLDivElement>

Inherited from​

Omit.onAnimationStartCapture

onAnimationEnd?​

optional onAnimationEnd: AnimationEventHandler<HTMLDivElement>

Inherited from​

Omit.onAnimationEnd

onAnimationEndCapture?​

optional onAnimationEndCapture: AnimationEventHandler<HTMLDivElement>

Inherited from​

Omit.onAnimationEndCapture

onAnimationIteration?​

optional onAnimationIteration: AnimationEventHandler<HTMLDivElement>

Inherited from​

Omit.onAnimationIteration

onAnimationIterationCapture?​

optional onAnimationIterationCapture: AnimationEventHandler<HTMLDivElement>

Inherited from​

Omit.onAnimationIterationCapture

onTransitionEnd?​

optional onTransitionEnd: TransitionEventHandler<HTMLDivElement>

Inherited from​

Omit.onTransitionEnd

onTransitionEndCapture?​

optional onTransitionEndCapture: TransitionEventHandler<HTMLDivElement>

Inherited from​

Omit.onTransitionEndCapture

accept?​

optional accept: string

Inherited from​

Omit.accept

acceptCharset?​

optional acceptCharset: string

Inherited from​

Omit.acceptCharset

action?​

optional action: string

Inherited from​

Omit.action

allowFullScreen?​

optional allowFullScreen: boolean

Inherited from​

Omit.allowFullScreen

allowTransparency?​

optional allowTransparency: boolean

Inherited from​

Omit.allowTransparency

alt?​

optional alt: string

Inherited from​

Omit.alt

as?​

optional as: string

Inherited from​

Omit.as

async?​

optional async: boolean

Inherited from​

Omit.async

autoComplete?​

optional autoComplete: string

Inherited from​

Omit.autoComplete

autoPlay?​

optional autoPlay: boolean

Inherited from​

Omit.autoPlay

capture?​

optional capture: boolean | "user" | "environment"

Inherited from​

Omit.capture

cellPadding?​

optional cellPadding: string | number

Inherited from​

Omit.cellPadding

cellSpacing?​

optional cellSpacing: string | number

Inherited from​

Omit.cellSpacing

charSet?​

optional charSet: string

Inherited from​

Omit.charSet

challenge?​

optional challenge: string

Inherited from​

Omit.challenge

checked?​

optional checked: boolean

Inherited from​

Omit.checked

classID?​

optional classID: string

Inherited from​

Omit.classID

cols?​

optional cols: number

Inherited from​

Omit.cols

colSpan?​

optional colSpan: number

Inherited from​

Omit.colSpan

controls?​

optional controls: boolean

Inherited from​

Omit.controls

coords?​

optional coords: string

Inherited from​

Omit.coords

crossOrigin?​

optional crossOrigin: CrossOrigin

Inherited from​

Omit.crossOrigin

dateTime?​

optional dateTime: string

Inherited from​

Omit.dateTime

default?​

optional default: boolean

Inherited from​

Omit.default

defer?​

optional defer: boolean

Inherited from​

Omit.defer

disabled?​

optional disabled: boolean

Inherited from​

Omit.disabled

download?​

optional download: any

Inherited from​

Omit.download

encType?​

optional encType: string

Inherited from​

Omit.encType

formAction?​

optional formAction: string

Inherited from​

Omit.formAction

formEncType?​

optional formEncType: string

Inherited from​

Omit.formEncType

formMethod?​

optional formMethod: string

Inherited from​

Omit.formMethod

formNoValidate?​

optional formNoValidate: boolean

Inherited from​

Omit.formNoValidate

formTarget?​

optional formTarget: string

Inherited from​

Omit.formTarget

frameBorder?​

optional frameBorder: string | number

Inherited from​

Omit.frameBorder

headers?​

optional headers: string

Inherited from​

Omit.headers

height?​

optional height: string | number

Inherited from​

Omit.height

high?​

optional high: number

Inherited from​

Omit.high

href?​

optional href: string

Inherited from​

Omit.href

hrefLang?​

optional hrefLang: string

Inherited from​

Omit.hrefLang

htmlFor?​

optional htmlFor: string

Inherited from​

Omit.htmlFor

httpEquiv?​

optional httpEquiv: string

Inherited from​

Omit.httpEquiv

integrity?​

optional integrity: string

Inherited from​

Omit.integrity

keyParams?​

optional keyParams: string

Inherited from​

Omit.keyParams

keyType?​

optional keyType: string

Inherited from​

Omit.keyType

kind?​

optional kind: string

Inherited from​

Omit.kind

list?​

optional list: string

Inherited from​

Omit.list

loop?​

optional loop: boolean

Inherited from​

Omit.loop

low?​

optional low: number

Inherited from​

Omit.low

manifest?​

optional manifest: string

Inherited from​

Omit.manifest

marginHeight?​

optional marginHeight: number

Inherited from​

Omit.marginHeight

marginWidth?​

optional marginWidth: number

Inherited from​

Omit.marginWidth

max?​

optional max: string | number

Inherited from​

Omit.max

maxLength?​

optional maxLength: number

Inherited from​

Omit.maxLength

media?​

optional media: string

Inherited from​

Omit.media

mediaGroup?​

optional mediaGroup: string

Inherited from​

Omit.mediaGroup

method?​

optional method: string

Inherited from​

Omit.method

min?​

optional min: string | number

Inherited from​

Omit.min

minLength?​

optional minLength: number

Inherited from​

Omit.minLength

multiple?​

optional multiple: boolean

Inherited from​

Omit.multiple

muted?​

optional muted: boolean

Inherited from​

Omit.muted

name?​

optional name: string

Inherited from​

Omit.name

noValidate?​

optional noValidate: boolean

Inherited from​

Omit.noValidate

open?​

optional open: boolean

Inherited from​

Omit.open

optimum?​

optional optimum: number

Inherited from​

Omit.optimum

placeholder?​

optional placeholder: string

Inherited from​

Omit.placeholder

playsInline?​

optional playsInline: boolean

Inherited from​

Omit.playsInline

poster?​

optional poster: string

Inherited from​

Omit.poster

preload?​

optional preload: string

Inherited from​

Omit.preload

readOnly?​

optional readOnly: boolean

Inherited from​

Omit.readOnly

required?​

optional required: boolean

Inherited from​

Omit.required

reversed?​

optional reversed: boolean

Inherited from​

Omit.reversed

rows?​

optional rows: number

Inherited from​

Omit.rows

rowSpan?​

optional rowSpan: number

Inherited from​

Omit.rowSpan

sandbox?​

optional sandbox: string

Inherited from​

Omit.sandbox

scope?​

optional scope: string

Inherited from​

Omit.scope

scoped?​

optional scoped: boolean

Inherited from​

Omit.scoped

scrolling?​

optional scrolling: string

Inherited from​

Omit.scrolling

seamless?​

optional seamless: boolean

Inherited from​

Omit.seamless

selected?​

optional selected: boolean

Inherited from​

Omit.selected

shape?​

optional shape: string

Inherited from​

Omit.shape

size?​

optional size: number

Inherited from​

Omit.size

sizes?​

optional sizes: string

Inherited from​

Omit.sizes

src?​

optional src: string

Inherited from​

Omit.src

srcDoc?​

optional srcDoc: string

Inherited from​

Omit.srcDoc

srcLang?​

optional srcLang: string

Inherited from​

Omit.srcLang

srcSet?​

optional srcSet: string

Inherited from​

Omit.srcSet

step?​

optional step: string | number

Inherited from​

Omit.step

target?​

optional target: string

Inherited from​

Omit.target

type?​

optional type: string

Inherited from​

Omit.type

useMap?​

optional useMap: string

Inherited from​

Omit.useMap

value?​

optional value: string | number | readonly string[]

Inherited from​

Omit.value

width?​

optional width: string | number

Inherited from​

Omit.width

wmode?​

optional wmode: string

Inherited from​

Omit.wmode

wrap?​

optional wrap: string

Inherited from​

Omit.wrap

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.

Inherited from​

Omit.logLevel

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.

Inherited from​

Omit.alignToBottom

atBottomStateChange()?​

optional atBottomStateChange: (atBottom) => 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.

Parameters​

atBottom​

boolean

Returns​

void

Inherited from​

Omit.atBottomStateChange

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.

Inherited from​

Omit.atBottomThreshold

atTopStateChange()?​

optional atTopStateChange: (atTop) => void

Called with true / false when the list has reached the top / gets scrolled down.

Parameters​

atTop​

boolean

Returns​

void

Inherited from​

Omit.atTopStateChange

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.

Inherited from​

Omit.atTopThreshold

components?​

optional components: Components<D, C>

Use the components property for advanced customization of the elements rendered by the list.

Inherited from​

Omit.components

computeItemKey?​

optional computeItemKey: ComputeItemKey<D, C>

If specified, the component will use the function to generate the key property for each list item.

Inherited from​

Omit.computeItemKey

context?​

optional context: C

Additional context available in the custom components and content callbacks

Inherited from​

Omit.context

customScrollParent?​

optional customScrollParent: HTMLElement

Pass a reference to a scrollable parent element, so that the list won't wrap in its own.

Inherited from​

Omit.customScrollParent

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.

Inherited from​

Omit.defaultItemHeight

endReached()?​

optional endReached: (index) => 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.

Parameters​

index​

number

Returns​

void

Inherited from​

Omit.endReached

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.

Inherited from​

Omit.fixedItemHeight

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
   }
 }} />

Inherited from​

Omit.followOutput

scrollIntoViewOnChange()?​

optional scrollIntoViewOnChange: (params) => undefined | null | false | void | ScrollIntoViewLocation

Implement this callback if you want to adjust the list position when the list total count changes. Return a ScrollIntoViewLocation object to scroll to a specific item, or falsey value to avoid scrolling. Use the context contents if you need to implement custom logic based on the current state of the list.

Parameters​

params​
context​

C

totalCount​

number

scrollingInProgress​

boolean

Returns​

undefined | null | false | void | ScrollIntoViewLocation

Inherited from​

Omit.scrollIntoViewOnChange

headerFooterTag?​

optional headerFooterTag: string

Set to customize the wrapper tag for the header and footer components (default is div).

Inherited from​

Omit.headerFooterTag

horizontalDirection?​

optional horizontalDirection: boolean

When set, turns the scroller into a horizontal list. The items are positioned with inline-block.

Inherited from​

Omit.horizontalDirection

increaseViewportBy?​

optional increaseViewportBy: number | { bottom: number; top: 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.

Inherited from​

Omit.increaseViewportBy

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.

Inherited from​

Omit.initialItemCount

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.

Inherited from​

Omit.initialScrollTop

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.

Inherited from​

Omit.initialTopMostItemIndex

isScrolling()?​

optional isScrolling: (isScrolling) => void

Called when the list starts/stops scrolling.

Parameters​

isScrolling​

boolean

Returns​

void

Inherited from​

Omit.isScrolling

itemSize?​

optional itemSize: SizeFunction

Allows customizing the height/width calculation of Item elements.

The default implementation reads el.getBoundingClientRect().height and el.getBoundingClientRect().width.

Inherited from​

Omit.itemSize

itemsRendered()?​

optional itemsRendered: (items) => void

Called with the new set of items each time the list items are rendered due to scrolling.

Parameters​

items​

ListItem<D>[]

Returns​

void

Inherited from​

Omit.itemsRendered

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).

Inherited from​

Omit.overscan

rangeChanged()?​

optional rangeChanged: (range) => void

Called with the new set of items each time the list items are rendered due to scrolling.

Parameters​

range​

ListRange

Returns​

void

Inherited from​

Omit.rangeChanged

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.

Inherited from​

Omit.restoreStateFrom

scrollerRef()?​

optional scrollerRef: (ref) => any

Provides access to the root DOM element

Parameters​

ref​

null | HTMLElement | Window

Returns​

any

Inherited from​

Omit.scrollerRef

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.

Inherited from​

Omit.scrollSeekConfiguration

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.

Inherited from​

Omit.skipAnimationFrameInResizeObserver

startReached()?​

optional startReached: (index) => void

Called when the user scrolls to the start of the list.

Parameters​

index​

number

Returns​

void

Inherited from​

Omit.startReached

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.

Inherited from​

Omit.topItemCount

totalListHeightChanged()?​

optional totalListHeightChanged: (height) => void

Called when the total list height is changed due to new items or viewport resize.

Parameters​

height​

number

Returns​

void

Inherited from​

Omit.totalListHeightChanged

useWindowScroll?​

optional useWindowScroll: boolean

Uses the document scroller rather than wrapping the list in its own.

Inherited from​

Omit.useWindowScroll