New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-virtuoso

Package Overview
Dependencies
Maintainers
0
Versions
291
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-virtuoso - npm Package Compare versions

Comparing version 4.12.3 to 4.12.4

914

dist/index.d.ts
import { default as default_2 } from 'react';
export declare type CalculateViewLocation = (params: CalculateViewLocationParams) => IndexLocationWithAlign | number | null;
export declare type CalculateViewLocation = (params: CalculateViewLocationParams) => IndexLocationWithAlign | null | number;
export declare interface CalculateViewLocationParams {
itemBottom: number;
itemTop: number;
itemBottom: number;
viewportTop: number;
viewportBottom: number;
locationParams: {
align?: 'start' | 'center' | 'end';
align?: 'center' | 'end' | 'start';
behavior?: 'auto' | 'smooth';
} & ({
groupIndex: number;
} | {
index: number;
} | {
groupIndex: number;
});
viewportBottom: number;
viewportTop: number;
}

@@ -25,68 +25,52 @@

/**
* Set to render a component at the top of the list.
*
* The header remains above the top items and does not remain sticky.
* Set to render a custom UI when the list is empty.
*/
Header?: default_2.ComponentType<{
context?: Context;
}>;
EmptyPlaceholder?: default_2.ComponentType<ContextProp<Context>>;
/**
* Set to render a component at the bottom of the list.
*/
Footer?: default_2.ComponentType<{
context?: Context;
}>;
Footer?: default_2.ComponentType<ContextProp<Context>>;
/**
* Set to customize the item wrapping element. Use only if you would like to render list from elements different than a `div`.
*/
Item?: default_2.ComponentType<ItemProps<Data> & {
context?: Context;
}>;
/**
* Set to customize the group item wrapping element. Use only if you would like to render list from elements different than a `div`.
*/
Group?: default_2.ComponentType<GroupProps & {
context?: Context;
}>;
Group?: default_2.ComponentType<GroupProps & ContextProp<Context>>;
/**
* Set to customize the top list item wrapping element. Use if you would like to render list from elements different than a `div`
* or you want to set a custom z-index for the sticky position.
* Set to render a component at the top of the list.
*
* The header remains above the top items and does not remain sticky.
*/
TopItemList?: default_2.ComponentType<TopItemListProps & {
context?: Context;
}>;
Header?: default_2.ComponentType<ContextProp<Context>>;
/**
* Set to customize the outermost scrollable element. This should not be necessary in general,
* as the component passes its HTML attribute props to it.
* Set to customize the item wrapping element. Use only if you would like to render list from elements different than a `div`.
*/
Scroller?: default_2.ComponentType<ScrollerProps & {
context?: Context;
}>;
Item?: default_2.ComponentType<ItemProps<Data> & ContextProp<Context>>;
/**
* Set to customize the items wrapper. Use only if you would like to render list from elements different than a `div`.
*/
List?: default_2.ComponentType<ListProps & {
context?: Context;
}>;
List?: default_2.ComponentType<ListProps & ContextProp<Context>>;
/**
* Set to render a custom UI when the list is empty.
* Set to customize the outermost scrollable element. This should not be necessary in general,
* as the component passes its HTML attribute props to it.
*/
EmptyPlaceholder?: default_2.ComponentType<{
context?: Context;
}>;
Scroller?: default_2.ComponentType<ScrollerProps & ContextProp<Context>>;
/**
* Set to render an item placeholder when the user scrolls fast. See the `scrollSeek` property for more details.
*/
ScrollSeekPlaceholder?: default_2.ComponentType<ScrollSeekPlaceholderProps & {
context?: Context;
}>;
ScrollSeekPlaceholder?: default_2.ComponentType<ScrollSeekPlaceholderProps & ContextProp<Context>>;
/**
* Set to customize the top list item wrapping element. Use if you would like to render list from elements different than a `div`
* or you want to set a custom z-index for the sticky position.
*/
TopItemList?: default_2.ComponentType<TopItemListProps & ContextProp<Context>>;
}
export declare interface ComputeItemKey<D, C> {
(index: number, item: D, context: C): default_2.Key;
export declare type ComputeItemKey<D, C> = (index: number, item: D, context: C) => default_2.Key;
export declare interface ContextProp<C> {
context: C;
}
export declare interface ElementDimensions {
height: number;
width: number;
height: number;
}

@@ -109,3 +93,3 @@

*/
index: number | 'LAST';
index: 'LAST' | number;
}

@@ -121,7 +105,7 @@

export declare type FollowOutputScalarType = boolean | 'smooth' | 'auto';
export declare type FollowOutputScalarType = 'auto' | 'smooth' | boolean;
export declare interface Gap {
column: number;
row: number;
column: number;
}

@@ -131,34 +115,24 @@

/**
* Set to customize the item wrapping element. Use only if you would like to render list from elements different than a `div`.
* Set to render a component at the bottom of the list.
*/
Item?: default_2.ComponentType<GridItemProps & {
context?: Context;
}>;
Footer?: default_2.ComponentType<ContextProp<Context>>;
/**
* Set to customize the outermost scrollable element. This should not be necessary in general,
* as the component passes its HTML attribute props to it.
* Set to render a component at the top of the list.
*
* The header remains above the top items and does not remain sticky.
*/
Scroller?: default_2.ComponentType<ScrollerProps & {
context?: Context;
}>;
Header?: default_2.ComponentType<ContextProp<Context>>;
/**
* Set to customize the items wrapper. Use only if you would like to render list from elements different than a `div`.
* Set to customize the item wrapping element. Use only if you would like to render list from elements different than a `div`.
*/
List?: default_2.ComponentType<GridListProps & {
context?: Context;
}>;
Item?: default_2.ComponentType<GridItemProps & ContextProp<Context>>;
/**
* Set to render a component at the top of the list.
*
* The header remains above the top items and does not remain sticky.
* Set to customize the items wrapper. Use only if you would like to render list from elements different than a `div`.
*/
Header?: default_2.ComponentType<{
context?: Context;
}>;
List?: default_2.ComponentType<GridListProps & ContextProp<Context>>;
/**
* Set to render a component at the bottom of the list.
* Set to customize the outermost scrollable element. This should not be necessary in general,
* as the component passes its HTML attribute props to it.
*/
Footer?: default_2.ComponentType<{
context?: Context;
}>;
Scroller?: default_2.ComponentType<ScrollerProps & ContextProp<Context>>;
/**

@@ -168,10 +142,6 @@ * Set to render an item placeholder when the user scrolls fast.

*/
ScrollSeekPlaceholder?: default_2.ComponentType<GridScrollSeekPlaceholderProps & {
context?: Context;
}>;
ScrollSeekPlaceholder?: default_2.ComponentType<GridScrollSeekPlaceholderProps & ContextProp<Context>>;
}
export declare interface GridComputeItemKey<D, C> {
(index: number, item: D, context: C): default_2.Key;
}
export declare type GridComputeItemKey<D, C> = (index: number, item: D, context: C) => default_2.Key;

@@ -181,9 +151,7 @@ export declare type GridIndexLocation = FlatIndexLocationWithAlign | number;

export declare interface GridItem<D> {
data?: D;
index: number;
data?: D;
}
export declare interface GridItemContent<D, C> {
(index: number, data: D, context: C): default_2.ReactNode;
}
export declare type GridItemContent<D, C> = (index: number, data: D, context: C) => default_2.ReactNode;

@@ -193,5 +161,5 @@ /**

*/
export declare type GridItemProps = Pick<default_2.ComponentProps<'div'>, 'style' | 'children' | 'className'> & {
export declare type GridItemProps = Pick<default_2.ComponentProps<'div'>, 'children' | 'className' | 'style'> & default_2.RefAttributes<HTMLDivElement> & {
'data-index': number;
} & default_2.RefAttributes<HTMLDivElement>;
};

@@ -201,7 +169,7 @@ /**

*/
export declare type GridListProps = Pick<default_2.ComponentProps<'div'>, 'style' | 'children' | 'className'> & {
export declare type GridListProps = Pick<default_2.ComponentProps<'div'>, 'children' | 'className' | 'style'> & default_2.RefAttributes<HTMLDivElement> & {
'data-testid': string;
} & default_2.RefAttributes<HTMLDivElement>;
};
export declare type GridRootProps = Omit<default_2.HTMLProps<HTMLDivElement>, 'ref' | 'data'>;
export declare type GridRootProps = Omit<default_2.HTMLProps<HTMLDivElement>, 'data' | 'ref'>;

@@ -212,4 +180,4 @@ /**

export declare interface GridScrollSeekPlaceholderProps {
height: number;
index: number;
height: number;
width: number;

@@ -219,11 +187,9 @@ }

export declare interface GridStateSnapshot {
viewport: ElementDimensions;
gap: Gap;
item: ElementDimensions;
gap: Gap;
scrollTop: number;
viewport: ElementDimensions;
}
export declare interface GroupContent<C> {
(index: number, context: C): default_2.ReactNode;
}
export declare type GroupContent<C> = (index: number, context: C) => default_2.ReactNode;

@@ -235,10 +201,6 @@ export declare interface GroupedScrollIntoViewLocation extends ScrollIntoViewLocationOptions {

export declare const GroupedVirtuoso: <ItemData = any, Context = any>(props: GroupedVirtuosoProps<ItemData, Context> & {
ref?: default_2.Ref<GroupedVirtuosoHandle> | undefined;
ref?: default_2.Ref<GroupedVirtuosoHandle>;
}) => default_2.ReactElement;
export declare interface GroupedVirtuosoHandle {
scrollToIndex(location: number | IndexLocationWithAlign): void;
scrollIntoView(location: number | ScrollIntoViewLocation): void;
scrollTo(location: ScrollToOptions): void;
scrollBy(location: ScrollToOptions): void;
autoscrollToBottom(): void;

@@ -249,19 +211,10 @@ /**

getState(stateCb: StateCallback): void;
scrollBy(location: ScrollToOptions): void;
scrollIntoView(location: number | ScrollIntoViewLocation): void;
scrollTo(location: ScrollToOptions): void;
scrollToIndex(location: IndexLocationWithAlign | number): void;
}
export declare interface GroupedVirtuosoProps<D, C> extends Omit<VirtuosoProps<D, C>, 'totalCount' | 'itemContent'> {
export declare interface GroupedVirtuosoProps<D, C> extends Omit<VirtuosoProps<D, C>, 'itemContent' | 'totalCount'> {
/**
* 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.
*/
groupCounts?: number[];
/**
* Specifies how each each group header gets rendered. The callback receives the zero-based index of the group.
*/
groupContent?: GroupContent<C>;
/**
* Specifies how each each item gets rendered.
*/
itemContent?: GroupItemContent<D, C>;
/**
* Use when implementing inverse infinite scrolling, decrease the value this property

@@ -280,2 +233,15 @@ * in combination with a change in `groupCounts` to prepend groups items to the top of the list.

firstItemIndex?: number;
/**
* Specifies how each each group header gets rendered. The callback receives the zero-based index of the group.
*/
groupContent?: GroupContent<C>;
/**
* 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.
*/
groupCounts?: number[];
/**
* Specifies how each each item gets rendered.
*/
itemContent?: GroupItemContent<D, C>;
}

@@ -291,11 +257,9 @@

export declare interface GroupItem<D> extends Item<D> {
originalIndex?: number;
type: 'group';
originalIndex?: number;
}
export declare interface GroupItemContent<D, C> {
(index: number, groupIndex: number, data: D, context: C): default_2.ReactNode;
}
export declare type GroupItemContent<D, C> = (index: number, groupIndex: number, data: D, context: C) => default_2.ReactNode;
export declare type GroupProps = Pick<default_2.ComponentProps<'div'>, 'style' | 'children'> & {
export declare type GroupProps = Pick<default_2.ComponentProps<'div'>, 'children' | 'style'> & {
'data-index': number;

@@ -309,16 +273,14 @@ 'data-item-index': number;

export declare interface Item<D> {
data?: D;
index: number;
offset: number;
size: number;
data?: D;
}
export declare interface ItemContent<D, C> {
(index: number, data: D, context: C): default_2.ReactNode;
}
export declare type ItemContent<D, C> = (index: number, data: D, context: C) => default_2.ReactNode;
export declare type ItemProps<D> = Pick<default_2.ComponentProps<'div'>, 'style' | 'children'> & {
export declare type ItemProps<D> = Pick<default_2.ComponentProps<'div'>, 'children' | 'style'> & {
'data-index': number;
'data-item-group-index'?: number;
'data-item-index': number;
'data-item-group-index'?: number;
'data-known-size': number;

@@ -328,3 +290,3 @@ item: D;

export declare type ListItem<D> = RecordItem<D> | GroupItem<D>;
export declare type ListItem<D> = GroupItem<D> | RecordItem<D>;

@@ -334,12 +296,12 @@ /**

*/
export declare type ListProps = Pick<default_2.ComponentProps<'div'>, 'style' | 'children'> & {
export declare type ListProps = Pick<default_2.ComponentProps<'div'>, 'children' | 'style'> & default_2.RefAttributes<HTMLDivElement> & {
'data-testid': string;
} & default_2.RefAttributes<HTMLDivElement>;
};
export declare interface ListRange {
endIndex: number;
startIndex: number;
endIndex: number;
}
export declare type ListRootProps = Omit<default_2.HTMLProps<HTMLDivElement>, 'ref' | 'data'>;
export declare type ListRootProps = Omit<default_2.HTMLProps<HTMLDivElement>, 'data' | 'ref'>;

@@ -350,7 +312,7 @@ export declare interface LocationOptions {

*/
align?: 'start' | 'center' | 'end';
align?: 'center' | 'end' | 'start';
/**
* Set 'smooth' to have an animated transition to the specified location.
*/
behavior?: 'smooth' | 'auto';
behavior?: 'auto' | 'smooth';
/**

@@ -370,6 +332,6 @@ * The offset to scroll.

export declare interface RecordItem<D> extends Item<D> {
type?: undefined;
data?: D;
groupIndex?: number;
originalIndex?: number;
data?: D;
type?: undefined;
}

@@ -386,6 +348,6 @@

*/
export declare type ScrollerProps = Pick<default_2.ComponentProps<'div'>, 'style' | 'children' | 'tabIndex'> & {
export declare type ScrollerProps = Pick<default_2.ComponentProps<'div'>, 'children' | 'style' | 'tabIndex'> & default_2.RefAttributes<HTMLDivElement> & {
'data-testid'?: string;
'data-virtuoso-scroller'?: boolean;
} & default_2.RefAttributes<HTMLDivElement>;
};

@@ -395,9 +357,5 @@ export declare type ScrollIntoViewLocation = FlatScrollIntoViewLocation | GroupedScrollIntoViewLocation;

export declare interface ScrollIntoViewLocationOptions {
align?: 'start' | 'center' | 'end';
align?: 'center' | 'end' | 'start';
behavior?: 'auto' | 'smooth';
/**
* Will be called when the scroll is done, or immediately if no scroll is needed.
*/
done?: () => void;
/**
* Use this function to fine-tune the scrollIntoView behavior.

@@ -426,2 +384,6 @@ * The function receives the item's top and bottom position in the viewport, and the viewport top/bottom.

calculateViewLocation?: CalculateViewLocation;
/**
* Will be called when the scroll is done, or immediately if no scroll is needed.
*/
done?: () => void;
}

@@ -431,2 +393,6 @@

/**
* called during scrolling in scroll seek mode - use to display a hint where the list is.
*/
change?: (velocity: number, range: ListRange) => void;
/**
* Callback to determine if the list should enter "scroll seek" mode.

@@ -436,6 +402,2 @@ */

/**
* called during scrolling in scroll seek mode - use to display a hint where the list is.
*/
change?: (velocity: number, range: ListRange) => void;
/**
* Callback to determine if the list should exit "scroll seek" mode.

@@ -450,11 +412,9 @@ */

export declare interface ScrollSeekPlaceholderProps {
groupIndex?: number;
height: number;
index: number;
height: number;
groupIndex?: number;
type: 'group' | 'item';
}
export declare interface ScrollSeekToggle {
(velocity: number, range: ListRange): boolean;
}
export declare type ScrollSeekToggle = (velocity: number, range: ListRange) => boolean;

@@ -465,5 +425,5 @@ /** Calculates the height of `el`, which will be the `Item` element in the DOM. */

export declare interface SizeRange {
startIndex: number;
endIndex: number;
size: number;
startIndex: number;
}

@@ -481,5 +441,5 @@

*/
export declare type TableBodyProps = Pick<default_2.ComponentProps<'tbody'>, 'style' | 'children' | 'className'> & {
export declare type TableBodyProps = Pick<default_2.ComponentProps<'tbody'>, 'children' | 'className' | 'style'> & default_2.RefAttributes<HTMLTableSectionElement> & {
'data-testid': string;
} & default_2.RefAttributes<HTMLTableSectionElement>;
};

@@ -491,73 +451,51 @@ /**

/**
* Set to customize the wrapping `table` element.
*
* Set to render a custom UI when the list is empty.
*/
Table?: default_2.ComponentType<TableProps & {
context?: Context;
}>;
EmptyPlaceholder?: default_2.ComponentType<ContextProp<Context>>;
/**
* Set to render a fixed header at the top of the table (`thead`). use [[fixedHeaderContent]] to set the contents
*
* Set to render an empty item placeholder.
*/
TableHead?: default_2.ComponentType<Pick<default_2.ComponentProps<'thead'>, 'style' | 'children'> & {
context?: Context;
} & default_2.RefAttributes<HTMLTableSectionElement>>;
FillerRow?: default_2.ComponentType<FillerRowProps & ContextProp<Context>>;
/**
* Set to render a fixed footer at the bottom of the table (`tfoot`). use [[fixedFooterContent]] to set the contents
* Set to customize the outermost scrollable element. This should not be necessary in general,
* as the component passes its HTML attribute props to it.
*/
TableFoot?: default_2.ComponentType<Pick<default_2.ComponentProps<'tfoot'>, 'style' | 'children'> & {
context?: Context;
} & default_2.RefAttributes<HTMLTableSectionElement>>;
Scroller?: default_2.ComponentType<ScrollerProps & ContextProp<Context>>;
/**
* Set to customize the item wrapping element. Default is `tr`.
* Set to render an item placeholder when the user scrolls fast. See the `scrollSeek` property for more details.
*/
TableRow?: default_2.ComponentType<ItemProps<Data> & {
context?: Context;
}>;
ScrollSeekPlaceholder?: default_2.ComponentType<ScrollSeekPlaceholderProps & ContextProp<Context>>;
/**
* Set to customize the outermost scrollable element. This should not be necessary in general,
* as the component passes its HTML attribute props to it.
* Set to customize the wrapping `table` element.
*
*/
Scroller?: default_2.ComponentType<ScrollerProps & {
context?: Context;
}>;
Table?: default_2.ComponentType<TableProps & ContextProp<Context>>;
/**
* Set to customize the items wrapper. Default is `tbody`.
*/
TableBody?: default_2.ComponentType<TableBodyProps & {
context?: Context;
}>;
TableBody?: default_2.ComponentType<TableBodyProps & ContextProp<Context>>;
/**
* Set to render a custom UI when the list is empty.
* Set to render a fixed footer at the bottom of the table (`tfoot`). use [[fixedFooterContent]] to set the contents
*/
EmptyPlaceholder?: default_2.ComponentType<{
context?: Context;
}>;
TableFoot?: default_2.ComponentType<Pick<default_2.ComponentProps<'tfoot'>, 'children' | 'style'> & default_2.RefAttributes<HTMLTableSectionElement> & ContextProp<Context>>;
/**
* Set to render an item placeholder when the user scrolls fast. See the `scrollSeek` property for more details.
* Set to render a fixed header at the top of the table (`thead`). use [[fixedHeaderContent]] to set the contents
*
*/
ScrollSeekPlaceholder?: default_2.ComponentType<ScrollSeekPlaceholderProps & {
context?: Context;
}>;
TableHead?: default_2.ComponentType<Pick<default_2.ComponentProps<'thead'>, 'children' | 'style'> & default_2.RefAttributes<HTMLTableSectionElement> & ContextProp<Context>>;
/**
* Set to render an empty item placeholder.
* Set to customize the item wrapping element. Default is `tr`.
*/
FillerRow?: default_2.ComponentType<FillerRowProps & {
context?: Context;
}>;
TableRow?: default_2.ComponentType<ItemProps<Data> & ContextProp<Context>>;
}
export declare type TableProps = Pick<default_2.ComponentProps<'table'>, 'style' | 'children'>;
export declare type TableProps = Pick<default_2.ComponentProps<'table'>, 'children' | 'style'>;
export declare type TableRootProps = Omit<default_2.HTMLProps<HTMLTableElement>, 'ref' | 'data'>;
export declare type TableRootProps = Omit<default_2.HTMLProps<HTMLTableElement>, 'data' | 'ref'>;
export declare const TableVirtuoso: <ItemData = any, Context = any>(props: TableVirtuosoProps<ItemData, Context> & {
ref?: default_2.Ref<TableVirtuosoHandle> | undefined;
ref?: default_2.Ref<TableVirtuosoHandle>;
}) => default_2.ReactElement;
export declare interface TableVirtuosoHandle {
scrollIntoView(location: number | FlatScrollIntoViewLocation): void;
scrollToIndex(location: number | FlatIndexLocationWithAlign): void;
scrollTo(location: ScrollToOptions): void;
scrollBy(location: ScrollToOptions): void;
/**

@@ -567,2 +505,6 @@ * Obtains the internal size state of the component, so that it can be restored later. This does not include the data items.

getState(stateCb: StateCallback): void;
scrollBy(location: ScrollToOptions): void;
scrollIntoView(location: FlatScrollIntoViewLocation | number): void;
scrollTo(location: ScrollToOptions): void;
scrollToIndex(location: FlatIndexLocationWithAlign | number): void;
}

@@ -572,69 +514,40 @@

/**
* Use the `components` property for advanced customization of the elements rendered by the table.
* 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.
*/
components?: TableComponents<D, C>;
alignToBottom?: boolean;
/**
* Set the contents of the table header.
* Called with true / false when the list has reached the bottom / gets scrolled up.
* Can be used to load newer items, like `tail -f`.
*/
fixedHeaderContent?: FixedHeaderContent;
atBottomStateChange?: (atBottom: boolean) => void;
/**
* Set the contents of the table footer.
* 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.
*/
fixedFooterContent?: FixedFooterContent;
atBottomThreshold?: number;
/**
* Set the amount of items to remain fixed at the top of the table.
* Called with `true` / `false` when the list has reached the top / gets scrolled down.
*/
topItemCount?: number;
atTopStateChange?: (atTop: boolean) => void;
/**
* The total amount of items to be rendered.
* 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.
*/
totalCount?: number;
atTopThreshold?: number;
/**
* The data items to be rendered. If data is set, the total count will be inferred from the length of the array.
* Use the `components` property for advanced customization of the elements rendered by the table.
*/
data?: readonly D[];
components?: TableComponents<D, C>;
/**
* 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`).
* If specified, the component will use the function to generate the `key` property for each list item.
*/
overscan?: number | {
main: number;
reverse: number;
};
computeItemKey?: ComputeItemKey<D, C>;
/**
* 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.
* Pass a reference to a scrollable parent element, so that the table won't wrap in its own.
*/
increaseViewportBy?: number | {
top: number;
bottom: number;
};
customScrollParent?: HTMLElement;
/**
* 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`.
* The data items to be rendered. If data is set, the total count will be inferred from the length of the array.
*/
initialTopMostItemIndex?: number | IndexLocationWithAlign;
data?: readonly D[];
/**
* 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.
*/
initialScrollTop?: number;
/**
* Use for server-side rendering - if set, the list will render the specified amount of items
* regardless of the container / item size.
*/
initialItemCount?: number;
/**
* Set the callback to specify the contents of the item.
*/
itemContent?: ItemContent<D, C>;
/**
* If specified, the component will use the function to generate the `key` property for each list item.
*/
computeItemKey?: ComputeItemKey<D, C>;
/**
* By default, the component assumes the default item height from the first rendered item (rendering it as a "probe").

@@ -650,8 +563,22 @@ *

/**
* Allows customizing the height/width calculation of `Item` elements.
* 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.
*/
endReached?: (index: number) => void;
/**
* 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.
*
* The default implementation reads `el.getBoundingClientRect().height` and `el.getBoundingClientRect().width`.
* Warning: the firstItemIndex should **be a positive number**, based on the total amount of items to be displayed.
*/
itemSize?: SizeFunction;
firstItemIndex?: number;
/**
* Set the contents of the table footer.
*/
fixedFooterContent?: FixedFooterContent;
/**
* Set the contents of the table header.
*/
fixedHeaderContent?: FixedHeaderContent;
/**
* Can be used to improve performance if the rendered items are of known size.

@@ -662,8 +589,2 @@ * Setting it causes the component to skip item measurements.

/**
* Use to display placeholders if the user scrolls fast through the list.
*
* Set `components.ScrollSeekPlaceholder` to change the placeholder content.
*/
scrollSeekConfiguration?: ScrollSeekConfiguration | false;
/**
* If set to `true`, the list automatically scrolls to bottom if the total count is changed.

@@ -688,9 +609,27 @@ * Set to `"smooth"` for an animated scrolling.

/**
* 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.
* 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.
*/
firstItemIndex?: number;
increaseViewportBy?: number | {
bottom: number;
top: number;
};
/**
* Use for server-side rendering - if set, the list will render the specified amount of items
* regardless of the container / item size.
*/
initialItemCount?: 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.
*/
initialScrollTop?: number;
/**
* 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`.
*/
initialTopMostItemIndex?: IndexLocationWithAlign | number;
/**
* Called when the list starts/stops scrolling.

@@ -700,78 +639,81 @@ */

/**
* 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.
* Set the callback to specify the contents of the item.
*/
endReached?: (index: number) => void;
itemContent?: ItemContent<D, C>;
/**
* Called when the user scrolls to the start of the list.
* Allows customizing the height/width calculation of `Item` elements.
*
* The default implementation reads `el.getBoundingClientRect().height` and `el.getBoundingClientRect().width`.
*/
startReached?: (index: number) => void;
itemSize?: SizeFunction;
/**
* Called with the new set of items each time the list items are rendered due to scrolling.
*/
rangeChanged?: (range: ListRange) => void;
itemsRendered?: (items: ListItem<D>[]) => 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`.
* 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`).
*/
atBottomStateChange?: (atBottom: boolean) => void;
overscan?: number | {
main: number;
reverse: number;
};
/**
* Called with `true` / `false` when the list has reached the top / gets scrolled down.
* Called with the new set of items each time the list items are rendered due to scrolling.
*/
atTopStateChange?: (atTop: boolean) => void;
rangeChanged?: (range: ListRange) => void;
/**
* Called when the total list height is changed due to new items or viewport resize.
* 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.
*/
totalListHeightChanged?: (height: number) => void;
restoreStateFrom?: StateSnapshot;
/**
* Called with the new set of items each time the list items are rendered due to scrolling.
* Provides access to the root DOM element
*/
itemsRendered?: (items: ListItem<D>[]) => void;
scrollerRef?: (ref: HTMLElement | null | Window) => any;
/**
* 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.
* Use to display placeholders if the user scrolls fast through the list.
*
* Set `components.ScrollSeekPlaceholder` to change the placeholder content.
*/
alignToBottom?: boolean;
scrollSeekConfiguration?: false | ScrollSeekConfiguration;
/**
* Uses the document scroller rather than wrapping the list in its own.
* Called when the user scrolls to the start of the list.
*/
useWindowScroll?: boolean;
startReached?: (index: number) => void;
/**
* Pass a reference to a scrollable parent element, so that the table won't wrap in its own.
* Set the amount of items to remain fixed at the top of the table.
*/
customScrollParent?: HTMLElement;
topItemCount?: number;
/**
* Provides access to the root DOM element
* The total amount of items to be rendered.
*/
scrollerRef?: (ref: HTMLElement | Window | null) => any;
totalCount?: number;
/**
* 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.
* Called when the total list height is changed due to new items or viewport resize.
*/
atTopThreshold?: number;
totalListHeightChanged?: (height: number) => void;
/**
* 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.
* Uses the document scroller rather than wrapping the list in its own.
*/
atBottomThreshold?: number;
/**
* 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.
*/
restoreStateFrom?: StateSnapshot;
useWindowScroll?: boolean;
}
export declare type TopItemListProps = Pick<default_2.ComponentProps<'div'>, 'style' | 'children'>;
export declare type TopItemListProps = Pick<default_2.ComponentProps<'div'>, 'children' | 'style'>;
export declare const Virtuoso: <ItemData = any, Context = any>(props: VirtuosoProps<ItemData, Context> & {
ref?: default_2.Ref<VirtuosoHandle> | undefined;
ref?: default_2.Ref<VirtuosoHandle>;
}) => default_2.ReactElement;
export declare const VirtuosoGrid: <ItemData = any, Context = any>(props: VirtuosoGridProps<ItemData, Context> & {
ref?: default_2.Ref<VirtuosoGridHandle> | undefined;
ref?: default_2.Ref<VirtuosoGridHandle>;
}) => default_2.ReactElement;
export declare interface VirtuosoGridHandle {
scrollBy(location: ScrollToOptions): void;
scrollTo(location: ScrollToOptions): void;
scrollToIndex(location: GridIndexLocation): void;
scrollTo(location: ScrollToOptions): void;
scrollBy(location: ScrollToOptions): void;
}

@@ -782,6 +724,6 @@

export declare interface VirtuosoGridMockContextValue {
itemHeight: number;
itemWidth: number;
viewportHeight: number;
viewportWidth: number;
itemHeight: number;
itemWidth: number;
}

@@ -791,10 +733,19 @@

/**
* The total amount of items to be rendered.
* Called with true / false when the list has reached the bottom / gets scrolled up.
* Can be used to load newer items, like `tail -f`.
*/
totalCount?: number;
atBottomStateChange?: (atBottom: boolean) => void;
/**
* The data items to be rendered. If data is set, the total count will be inferred from the length of the array.
* Called with `true` / `false` when the list has reached the top / gets scrolled down.
*/
data?: readonly D[];
atTopStateChange?: (atTop: boolean) => void;
/**
* Use the `components` property for advanced customization of the elements rendered by the list.
*/
components?: GridComponents<C>;
/**
* If specified, the component will use the function to generate the `key` property for each list item.
*/
computeItemKey?: GridComputeItemKey<D, C>;
/**
* Additional context available in the custom components and content callbacks

@@ -804,25 +755,15 @@ */

/**
* Use for server-side rendering - if set, the list will render the specified amount of items
* regardless of the container / item size.
* Pass a reference to a scrollable parent element, so that the grid won't wrap in its own.
*/
initialItemCount?: number;
customScrollParent?: HTMLElement;
/**
* Set the callback to specify the contents of the item.
* The data items to be rendered. If data is set, the total count will be inferred from the length of the array.
*/
itemContent?: GridItemContent<D, C>;
data?: readonly D[];
/**
* Use the `components` property for advanced customization of the elements rendered by the list.
* 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.
*/
components?: GridComponents<C>;
endReached?: (index: number) => void;
/**
* 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 grid in both the main and the reverse scrollable directions.
* See the `increaseViewportBy` property for a similar behavior (equivalent to the `overscan` in react-window).
*/
overscan?: number | {
main: number;
reverse: number;
};
/**
*

@@ -837,16 +778,12 @@ * *The property accepts pixel values.*

increaseViewportBy?: number | {
bottom: number;
top: number;
bottom: number;
};
/**
* If specified, the component will use the function to generate the `key` property for each list item.
* Use for server-side rendering - if set, the list will render the specified amount of items
* regardless of the container / item size.
*/
computeItemKey?: GridComputeItemKey<D, C>;
initialItemCount?: number;
initialTopMostItemIndex?: GridIndexLocation;
/**
* Use to display placeholders if the user scrolls fast through the list.
*
* Set `components.ScrollSeekPlaceholder` to change the placeholder content.
*/
scrollSeekConfiguration?: ScrollSeekConfiguration | false;
/**
* Called when the list starts/stops scrolling.

@@ -856,29 +793,39 @@ */

/**
* 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.
* Sets the grid items' className
*/
endReached?: (index: number) => void;
itemClassName?: string;
/**
* Called when the user scrolls to the start of the list.
* Set the callback to specify the contents of the item.
*/
startReached?: (index: number) => void;
itemContent?: GridItemContent<D, C>;
/**
* Called with the new set of items each time the list items are rendered due to scrolling.
* Sets the className for the list DOM element
*/
rangeChanged?: (range: ListRange) => void;
listClassName?: string;
/**
* reports when the grid state changes. The reported value can be stored and passed back to `restoreStateFrom` to restore the grid to the same state.
* 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.
*/
stateChanged?: (state: GridStateSnapshot) => void;
restoreStateFrom?: GridStateSnapshot | undefined | null;
logLevel?: LogLevel;
/**
* Called with true / false when the list has reached the bottom / gets scrolled up.
* Can be used to load newer items, like `tail -f`.
* 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 grid in both the main and the reverse scrollable directions.
* See the `increaseViewportBy` property for a similar behavior (equivalent to the `overscan` in react-window).
*/
atBottomStateChange?: (atBottom: boolean) => void;
overscan?: number | {
main: number;
reverse: number;
};
/**
* Called with `true` / `false` when the list has reached the top / gets scrolled down.
* Called with the new set of items each time the list items are rendered due to scrolling.
*/
atTopStateChange?: (atTop: boolean) => void;
rangeChanged?: (range: ListRange) => void;
/**
* invoked with true after the grid has done the initial render and the items have been measured.
*/
readyStateChanged?: (ready: boolean) => void;
restoreStateFrom?: GridStateSnapshot | null | undefined;
/**
* Provides access to the root DOM element

@@ -888,28 +835,23 @@ */

/**
* Sets the className for the list DOM element
* Use to display placeholders if the user scrolls fast through the list.
*
* Set `components.ScrollSeekPlaceholder` to change the placeholder content.
*/
listClassName?: string;
scrollSeekConfiguration?: false | ScrollSeekConfiguration;
/**
* Sets the grid items' className
* Called when the user scrolls to the start of the list.
*/
itemClassName?: string;
startReached?: (index: number) => void;
/**
* Uses the document scroller rather than wrapping the grid in its own.
* reports when the grid state changes. The reported value can be stored and passed back to `restoreStateFrom` to restore the grid to the same state.
*/
useWindowScroll?: boolean;
stateChanged?: (state: GridStateSnapshot) => void;
/**
* Pass a reference to a scrollable parent element, so that the grid won't wrap in its own.
* The total amount of items to be rendered.
*/
customScrollParent?: HTMLElement;
totalCount?: number;
/**
* 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.
* Uses the document scroller rather than wrapping the grid in its own.
*/
logLevel?: LogLevel;
initialTopMostItemIndex?: GridIndexLocation;
/**
* invoked with true after the grid has done the initial render and the items have been measured.
*/
readyStateChanged?: (ready: boolean) => void;
useWindowScroll?: boolean;
}

@@ -919,6 +861,14 @@

/**
* Scrolls the component to the specified item index. See {@link IndexLocationWithAlign} for more options.
* Use this with combination with follow output if you have images loading in the list. Listen to the image loading and call the method.
*/
scrollToIndex(location: number | FlatIndexLocationWithAlign): void;
autoscrollToBottom(): void;
/**
* Obtains the internal size state of the component, so that it can be restored later. This does not include the data items.
*/
getState(stateCb: StateCallback): void;
/**
* Scrolls the component with the specified amount. See [ScrollToOptions (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions)
*/
scrollBy(location: ScrollToOptions): void;
/**
* Scrolls the item into view if necessary. See [the website example](http://virtuoso.dev/keyboard-navigation/) for an implementation.

@@ -932,13 +882,5 @@ */

/**
* Scrolls the component with the specified amount. See [ScrollToOptions (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions)
* Scrolls the component to the specified item index. See {@link IndexLocationWithAlign} for more options.
*/
scrollBy(location: ScrollToOptions): void;
/**
* Use this with combination with follow output if you have images loading in the list. Listen to the image loading and call the method.
*/
autoscrollToBottom(): void;
/**
* Obtains the internal size state of the component, so that it can be restored later. This does not include the data items.
*/
getState(stateCb: StateCallback): void;
scrollToIndex(location: FlatIndexLocationWithAlign | number): void;
}

@@ -949,4 +891,4 @@

export declare interface VirtuosoMockContextValue {
itemHeight: number;
viewportHeight: number;
itemHeight: number;
}

@@ -956,74 +898,48 @@

/**
* The total amount of items to be rendered.
* 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.
*/
totalCount?: number;
alignToBottom?: boolean;
/**
* The data items to be rendered. If data is set, the total count will be inferred from the length of the array.
* Called with true / false when the list has reached the bottom / gets scrolled up.
* Can be used to load newer items, like `tail -f`.
*/
data?: readonly D[];
atBottomStateChange?: (atBottom: boolean) => void;
/**
* Additional context available in the custom components and content callbacks
*/
context?: C;
/**
* *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).
*
* 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.
*/
overscan?: number | {
main: number;
reverse: number;
};
atBottomThreshold?: 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.
*
* Called with `true` / `false` when the list has reached the top / gets scrolled down.
*/
increaseViewportBy?: number | {
top: number;
bottom: number;
};
atTopStateChange?: (atTop: boolean) => void;
/**
* Set the amount of items to remain fixed at the top of the list.
* *The property accepts pixel values.*
*
* For a header that scrolls away when scrolling, check the `components.Header` property.
* 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.
*/
topItemCount?: number;
atTopThreshold?: number;
/**
* 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`.
* Use the `components` property for advanced customization of the elements rendered by the list.
*/
initialTopMostItemIndex?: number | IndexLocationWithAlign;
components?: Components<D, C>;
/**
* 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.
* If specified, the component will use the function to generate the `key` property for each list item.
*/
initialScrollTop?: number;
computeItemKey?: ComputeItemKey<D, C>;
/**
* Use for server-side rendering - if set, the list will render the specified amount of items
* regardless of the container / item size.
* Additional context available in the custom components and content callbacks
*/
initialItemCount?: number;
context?: C;
/**
* Use the `components` property for advanced customization of the elements rendered by the list.
* Pass a reference to a scrollable parent element, so that the list won't wrap in its own.
*/
components?: Components<D, C>;
customScrollParent?: HTMLElement;
/**
* Set the callback to specify the contents of the item.
* The data items to be rendered. If data is set, the total count will be inferred from the length of the array.
*/
itemContent?: ItemContent<D, C>;
data?: readonly D[];
/**
* If specified, the component will use the function to generate the `key` property for each list item.
*/
computeItemKey?: ComputeItemKey<D, C>;
/**
* By default, the component assumes the default item height from the first rendered item (rendering it as a "probe").

@@ -1039,7 +955,13 @@ *

/**
* Allows customizing the height/width calculation of `Item` elements.
* 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.
*/
endReached?: (index: number) => void;
/**
* 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.
*
* The default implementation reads `el.getBoundingClientRect().height` and `el.getBoundingClientRect().width`.
* Warning: the firstItemIndex should **be a positive number**, based on the total amount of items to be displayed.
*/
itemSize?: SizeFunction;
firstItemIndex?: number;
/**

@@ -1051,8 +973,2 @@ * Can be used to improve performance if the rendered items are of known size.

/**
* Use to display placeholders if the user scrolls fast through the list.
*
* Set `components.ScrollSeekPlaceholder` to change the placeholder content.
*/
scrollSeekConfiguration?: ScrollSeekConfiguration | false;
/**
* If set to `true`, the list automatically scrolls to bottom if the total count is changed.

@@ -1081,38 +997,48 @@ * Set to `"smooth"` for an animated scrolling.

/**
* 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.
* When set, turns the scroller into a horizontal list. The items are positioned with `inline-block`.
*/
firstItemIndex?: number;
horizontalDirection?: boolean;
/**
* Called when the list starts/stops scrolling.
*
* *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.
*
*/
isScrolling?: (isScrolling: boolean) => void;
increaseViewportBy?: number | {
bottom: number;
top: number;
};
/**
* 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.
* Use for server-side rendering - if set, the list will render the specified amount of items
* regardless of the container / item size.
*/
endReached?: (index: number) => void;
initialItemCount?: number;
/**
* Called when the user scrolls to the start of the list.
* 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.
*/
startReached?: (index: number) => void;
initialScrollTop?: number;
/**
* Called with the new set of items each time the list items are rendered due to scrolling.
* 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`.
*/
rangeChanged?: (range: ListRange) => void;
initialTopMostItemIndex?: IndexLocationWithAlign | number;
/**
* Called with true / false when the list has reached the bottom / gets scrolled up.
* Can be used to load newer items, like `tail -f`.
* Called when the list starts/stops scrolling.
*/
atBottomStateChange?: (atBottom: boolean) => void;
isScrolling?: (isScrolling: boolean) => void;
/**
* Called with `true` / `false` when the list has reached the top / gets scrolled down.
* Set the callback to specify the contents of the item.
*/
atTopStateChange?: (atTop: boolean) => void;
itemContent?: ItemContent<D, C>;
/**
* Called when the total list height is changed due to new items or viewport resize.
* Allows customizing the height/width calculation of `Item` elements.
*
* The default implementation reads `el.getBoundingClientRect().height` and `el.getBoundingClientRect().width`.
*/
totalListHeightChanged?: (height: number) => void;
itemSize?: SizeFunction;
/**

@@ -1123,52 +1049,68 @@ * Called with the new set of items each time the list items are rendered due to scrolling.

/**
* 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.
* 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.
*/
alignToBottom?: boolean;
logLevel?: LogLevel;
/**
* Uses the document scroller rather than wrapping the list in its own.
* *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).
*
*/
useWindowScroll?: boolean;
overscan?: number | {
main: number;
reverse: number;
};
/**
* Pass a reference to a scrollable parent element, so that the list won't wrap in its own.
* Called with the new set of items each time the list items are rendered due to scrolling.
*/
customScrollParent?: HTMLElement;
rangeChanged?: (range: ListRange) => void;
/**
* 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.
*/
restoreStateFrom?: StateSnapshot;
/**
* Provides access to the root DOM element
*/
scrollerRef?: (ref: HTMLElement | Window | null) => any;
scrollerRef?: (ref: HTMLElement | null | Window) => any;
/**
* *The property accepts pixel values.*
* Use to display placeholders if the user scrolls fast through the list.
*
* 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.
* Set `components.ScrollSeekPlaceholder` to change the placeholder content.
*/
atTopThreshold?: number;
scrollSeekConfiguration?: false | ScrollSeekConfiguration;
/**
* *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.
* 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.
*/
atBottomThreshold?: number;
skipAnimationFrameInResizeObserver?: boolean;
/**
* set to LogLevel.DEBUG to enable various diagnostics in the console, the most useful being the item measurement reports.
* Called when the user scrolls to the start of the list.
*/
startReached?: (index: number) => void;
/**
* Set the amount of items to remain fixed at the top of the list.
*
* Ensure that you have "all levels" enabled in the browser console too see the messages.
* For a header that scrolls away when scrolling, check the `components.Header` property.
*/
logLevel?: LogLevel;
topItemCount?: number;
/**
* 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.
* The total amount of items to be rendered.
*/
restoreStateFrom?: StateSnapshot;
totalCount?: number;
/**
* When set, turns the scroller into a horizontal list. The items are positioned with `inline-block`.
* Called when the total list height is changed due to new items or viewport resize.
*/
horizontalDirection?: boolean;
totalListHeightChanged?: (height: number) => void;
/**
* 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.
* Uses the document scroller rather than wrapping the list in its own.
*/
skipAnimationFrameInResizeObserver?: boolean;
useWindowScroll?: boolean;
}

@@ -1183,1 +1125,5 @@

export { }
declare namespace _default {
let stories: string[];
}

71

package.json
{
"name": "react-virtuoso",
"description": "A virtual scroll React component for efficiently rendering large scrollable lists, grids, tables, and feeds",
"author": "Petyo Ivanov",
"sideEffects": false,
"version": "4.12.3",
"version": "4.12.4",
"homepage": "https://virtuoso.dev/",

@@ -29,2 +30,6 @@ "license": "MIT",

],
"repository": {
"type": "git",
"url": "https://github.com/petyosi/react-virtuoso.git"
},
"scripts": {

@@ -34,20 +39,18 @@ "build": "vite build",

"test:watch": "vitest watch",
"e2e": "playwright test",
"lint": "eslint src test e2e --ext .ts,.tsx",
"typecheck": "tsc --noEmit -p tsconfig.typecheck.json",
"e2e": "playwright test --workers=1",
"lint": "eslint",
"typecheck": "tsc",
"dev": "LADLE=true ladle serve",
"prepare": "pnpm run build && husky install",
"semantic-release": "semantic-release"
"ci-setup": "npx playwright install --with-deps"
},
"peerDependencies": {
"react": ">=16 || >=17 || >= 18",
"react-dom": ">=16 || >=17 || >= 18"
"react": ">=16 || >=17 || >= 18 || >= 19",
"react-dom": ">=16 || >=17 || >= 18 || >=19"
},
"devDependencies": {
"@commitlint/cli": "^17.6.3",
"@commitlint/config-conventional": "^17.6.3",
"@emotion/core": "^11.0.0",
"@emotion/styled": "^11.10.8",
"@eslint/js": "^9.19.0",
"@faker-js/faker": "^7.6.0",
"@ladle/react": "^2.12.3",
"@ladle/react": "^5.0.1",
"@playwright/test": "^1.33.0",

@@ -62,22 +65,16 @@ "@tanstack/react-table": "^8.9.11",

"@types/react-router-dom": "^5.3.3",
"@typescript-eslint/eslint-plugin": "^5.59.2",
"@typescript-eslint/parser": "^5.59.2",
"@vitejs/plugin-react": "^4.3.1",
"@vitejs/plugin-react-swc": "^3.7.2",
"clsx": "^1.2.1",
"eslint": "^8.39.0",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-html": "^7.1.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-json": "^3.1.0",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"husky": "^8.0.3",
"eslint": "^9.19.0",
"eslint-config-prettier": "^10.0.1",
"eslint-plugin-perfectionist": "^4.7.0",
"eslint-plugin-prettier": "^5.2.3",
"eslint-plugin-react": "^7.37.4",
"eslint-plugin-react-hooks": "^5.1.0",
"globals": "^15.14.0",
"immer": "^10.0.1",
"jsdom": "^22.0.0",
"jsdom": "^26.0.0",
"lodash": "^4.17.21",
"playwright": "^1.33.0",
"prettier": "^2.2.1",
"prism-react-renderer": "^1.3.5",
"prettier": "^3.4.2",
"react": "18.3.1",

@@ -87,15 +84,11 @@ "react-beautiful-dnd": "^13.1.1",

"react-router-dom": "^6.14.0",
"semantic-release": "^19.0.5",
"terser": "^5.17.1",
"tslib": "^2.5.0",
"typedoc": "^0.24.6",
"typedoc-plugin-markdown": "^3.15.3",
"typescript": "^5.0.4",
"vite": "^5.4.2",
"vite-plugin-dts": "^4.0.3",
"vitest": "^2.0.5"
"typescript": "^5.7.3",
"typescript-eslint": "^8.22.0",
"vite": "^6.0.11",
"vite-plugin-dts": "^4.5.0",
"vitest": "^3.0.4"
},
"packageManager": "pnpm@8.14.3+sha256.2d0363bb6c314daa67087ef07743eea1ba2e2d360c835e8fec6b5575e4ed9484",
"engines": {
"node": ">=10"
"node": "22"
},

@@ -107,7 +100,3 @@ "prettier": {

"trailingComma": "es5"
},
"repository": {
"type": "git",
"url": "https://github.com/petyosi/react-virtuoso.git"
}
}

97

README.md

@@ -1,102 +0,9 @@

<img src="https://user-images.githubusercontent.com/13347/101237112-ec4c6000-36de-11eb-936d-4b6b7ec94976.png" width="229" />
# React Virtuoso
[![npm version](https://img.shields.io/npm/v/react-virtuoso.svg?style=flat)](//badge.fury.io/js/react-virtuoso)
**React Virtuoso** - the most complete React virtualization rendering list/table/grid family of components.
- Variable sized items out of the box; no manual measurements or hard-coding item heights is necessary;
- [Chat message list UI](https://virtuoso.dev/virtuoso-message-list/) **NEW**;
- [Grouped mode with sticky headers](https://virtuoso.dev/grouped-by-first-letter/);
- [Responsive grid layout](https://virtuoso.dev/grid-responsive-columns/);
- [Table Support](https://virtuoso.dev/hello-table/);
- [Automatic handling of content resize](https://virtuoso.dev/auto-resizing/);
- [Custom Header, Footer, and empty list components](https://virtuoso.dev/customize-structure/);
- [Pinned top items](https://virtuoso.dev/top-items/);
- [Endless scrolling](https://virtuoso.dev/endless-scrolling/), [press to load more](https://virtuoso.dev/press-to-load-more/);
- [Initial top most item index](https://virtuoso.dev/initial-index/);
- [Scroll to index method](https://virtuoso.dev/scroll-to-index/).
[virtuoso.dev](https://virtuoso.dev).
For live examples and documentation, check the [documentation website](https://virtuoso.dev).
## Sponsors
If you are using Virtuoso for work, [sponsor it](https://github.com/sponsors/petyosi). Any donation helps a lot with the project development and maintenance.
## Get Started
```sh
npm install react-virtuoso
```
```jsx
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { Virtuoso } from 'react-virtuoso'
const App = () => {
return <Virtuoso style={{ height: '400px' }} totalCount={200} itemContent={index => <div>Item {index}</div>} />
}
ReactDOM.render(<App />, document.getElementById('root'))
```
## [Message List](https://virtuoso.dev/virtuoso-message-list/)
The Virtuoso message list component is built specifically for human/chatbot conversations. In addition to the virtualized rendering, the component exposes an imperative data management
API that gives you the necessary control over the scroll position when older messages are loaded, new messages arrive, and when the user submits a message. The scroll position can update instantly or with a smooth scroll animation.
## [Grouped Mode](https://virtuoso.dev/grouped-by-first-letter/)
The `GroupedVirtuoso` component is a variant of the "flat" `Virtuoso`, with the following differences:
- Instead of `totalCount`, the component exposes `groupCounts: number[]` property, which specifies the amount of items in each group.
For example, passing `[20, 30]` will render two groups with 20 and 30 items each;
- In addition the `itemContent` property, the component requires an additional `groupContent` property,
which renders the **group header**. The `groupContent` callback receives the zero-based group index as a parameter.
## [Grid](https://virtuoso.dev/grid-responsive-columns/)
The `VirtuosoGrid` component displays **same sized items** in multiple columns.
The layout and item sizing is controlled through CSS class properties, which allows you to use media queries, min-width, percentage, etc.
## [Table](https://virtuoso.dev/hello-table/)
The `TableVirtuoso` component works just like `Virtuoso`, but with HTML tables.
It supports window scrolling, sticky headers, sticky columns, and works with React Table and MUI Table.
## Works With Your UI Library of Choice
You can customize the markup up to your requirements - check [the Material UI list demo](https://virtuoso.dev/material-ui-endless-scrolling/).
If you need to support reordering, [check the React Sortable HOC example](https://virtuoso.dev/react-sortable-hoc/).
## Documentation and Demos
For in-depth documentation and live examples of the supported features and live demos, check the [documentation website](https://virtuoso.dev).
## Browser support
To support [legacy browsers](https://caniuse.com/resizeobserver), you might have to load a [ResizeObserver Polyfill](https://www.npmjs.com/package/resize-observer-polyfill) before using `react-virtuoso`:
```
import ResizeObserver from 'resize-observer-polyfill'
if (!window.ResizeObserver)
window.ResizeObserver = ResizeObserver
```
## Author
Petyo Ivanov [@petyosi](//twitter.com/petyosi).
## Contributing
### Fixes and new Features
To run the tests, use `npm run test`.
An end-to-end browser-based test suite is runnable with `npm run e2e`, with the pages being `e2e/*.tsx` and the tests `e2e/*.test.ts`.
A convenient way to debug something is to preview the test cases in the browser.
To do that, run `npm run dev` - it will launch a Ladle server that lets you browse the components in the `examples` folder.
## License
MIT License.
dist/index.cjs

Sorry, the diff of this file is not supported yet

dist/index.mjs

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc