aura-glass/dist/hooks/useVirtualization.d.ts

A comprehensive glassmorphism design system for React applications with 142+ production-ready components

import React from 'react';
export interface VirtualizationOptions {
    itemHeight: number | ((index: number) => number);
    containerHeight: number;
    overscan?: number;
    enableHorizontal?: boolean;
    itemWidth?: number | ((index: number) => number);
    containerWidth?: number;
    threshold?: number;
    onScroll?: (scrollTop: number, scrollLeft: number) => void;
}
export interface VirtualizedItem<T> {
    index: number;
    data: T;
    style: React.CSSProperties;
}
export interface VirtualizationState<T> {
    startIndex: number;
    endIndex: number;
    visibleItems: VirtualizedItem<T>[];
    totalHeight: number;
    totalWidth: number;
    scrollTop: number;
    scrollLeft: number;
}
/**
 * High-performance virtualization hook for large datasets
 */
export declare function useVirtualization<T>(items: T[], options: VirtualizationOptions): VirtualizationState<T> & {
    containerProps: React.HTMLAttributes<HTMLDivElement> & {
        ref: React.RefObject<HTMLDivElement>;
    };
    scrollElementProps: React.HTMLAttributes<HTMLDivElement>;
    measureElement: (index: number, element: HTMLElement) => void;
    scrollToIndex: (index: number, align?: 'start' | 'center' | 'end') => void;
};
/**
 * Hook for grid virtualization
 */
export declare function useGridVirtualization<T>(items: T[], options: {
    itemHeight: number;
    itemWidth: number;
    containerHeight: number;
    containerWidth: number;
    columns: number;
    gap?: number;
    overscan?: number;
}): {
    visibleItems: (VirtualizedItem<T> & {
        row: number;
        col: number;
    })[];
    totalHeight: number;
    containerProps: {
        onScroll: (e: React.UIEvent<HTMLDivElement>) => void;
        style: {
            height: number;
            width: number;
            overflow: string;
            contain: string;
        };
    };
    scrollElementProps: {
        style: {
            height: number;
            width: number;
            position: string;
            contain: string;
        };
    };
};
/**
 * Hook for infinite scroll with virtualization
 */
export declare function useInfiniteVirtualization<T>(items: T[], options: VirtualizationOptions & {
    loadMore: () => Promise<T[]>;
    hasMore: boolean;
    isLoading: boolean;
}): {
    isLoadingMore: boolean;
    totalItems: number;
    startIndex: number;
    endIndex: number;
    visibleItems: VirtualizedItem<T>[];
    totalHeight: number;
    totalWidth: number;
    scrollTop: number;
    scrollLeft: number;
    containerProps: React.HTMLAttributes<HTMLDivElement> & {
        ref: React.RefObject<HTMLDivElement>;
    };
    scrollElementProps: React.HTMLAttributes<HTMLDivElement>;
    measureElement: (index: number, element: HTMLElement) => void;
    scrollToIndex: (index: number, align?: "start" | "center" | "end") => void;
};
/**
 * Hook for window virtualization (entire viewport)
 */
export declare function useWindowVirtualization<T>(items: T[], itemHeight: number | ((index: number) => number), overscan?: number): {
    startIndex: number;
    endIndex: number;
    visibleItems: VirtualizedItem<T>[];
    scrollY: number;
    windowHeight: number;
};
/**
 * Hook for table virtualization with fixed headers
 */
export declare function useTableVirtualization<T>(data: T[], options: {
    rowHeight: number;
    headerHeight: number;
    containerHeight: number;
    columns: Array<{
        key: string;
        width: number;
        fixed?: boolean;
    }>;
    overscan?: number;
}): {
    visibleRows: (VirtualizedItem<T> & {
        columns: {
            key: string;
            width: number;
            fixed?: boolean;
        }[];
    })[];
    totalHeight: number;
    totalWidth: number;
    scrollTop: number;
    scrollLeft: number;
    headerHeight: number;
    containerProps: {
        onScroll: (e: React.UIEvent<HTMLDivElement>) => void;
        style: {
            height: number;
            overflow: string;
            contain: string;
        };
    };
    scrollElementProps: {
        style: {
            height: number;
            width: number;
            position: string;
            contain: string;
        };
    };
};
//# sourceMappingURL=useVirtualization.d.ts.map