@itwin/itwinui-react/esm/utils/hooks/useVirtualScroll.js

A react component library for iTwinUI

import { useVirtualizer } from '@tanstack/react-virtual';
import React from 'react';
let css = `
:host {
  contain: layout;
  background-color: var(--iui-color-background);
}
[data-iui-virtualizer='root'] {
  min-inline-size: 100%;
  position: relative;
}
::slotted([data-iui-virtualizer='item']) {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}
`;
export const useVirtualScroll = (params) => {
  let { ...rest } = params;
  let _virtualizer = useVirtualizer({
    indexAttribute: 'data-iui-index',
    overscan: 10,
    ...rest,
  });
  let scrollToIndex = React.useCallback(
    (index, options) => {
      setTimeout(() => {
        _virtualizer.scrollToIndex(index, {
          align: 'auto',
          ...options,
        });
      });
    },
    [_virtualizer],
  );
  let virtualizer = React.useMemo(
    () => ({
      ..._virtualizer,
      scrollToIndex,
    }),
    [_virtualizer, scrollToIndex],
  );
  return React.useMemo(
    () => ({
      virtualizer,
      css,
    }),
    [virtualizer],
  );
};