@itwin/itwinui-react
Version:
A react component library for iTwinUI
35 lines (34 loc) • 1.15 kB
TypeScript
import { useVirtualizer } from '@tanstack/react-virtual';
import type { Virtualizer } from '@tanstack/react-virtual';
/**
* Wrapper over `useVirtualizer` from `@tanstack/react-virtual` that sets the index attribute to
* `data-iui-index` and adds wraps the `scrollToIndex` function in a `setTimeout` so it can be used in `useLayoutEffect`.
*
* @example
* const { virtualizer, css } = useVirtualScroll({
* count: item.length,
* getScrollElement: () => parentRef.current,
* estimateSize: () => 30,
* });
*
* <Parent ref={parentRef}>
* <ShadowRoot css={css}>
* <div data-iui-virtualizer="root" style={{ height: virtualizer.getTotalSize() }}>
* <slot />
* </div>
* </ShadowRoot>
*
* {virtualizer.getVirtualItems().map((item) => (
* <Item
* data-iui-virtualizer="item"
* data-iui-index={item.index}
* style={{ transform: `translateY(${item.start}px)`}}
* ref={virtualizer.measureElement}
* />
* ))}
* </Parent>
*/
export declare const useVirtualScroll: (params: Parameters<typeof useVirtualizer>[0]) => {
virtualizer: Virtualizer<Element, Element>;
css: string;
};