@virtuoso.dev/masonry/dist/index.d.ts

Virtualized React component for rendering masonry layouts

/* Excluded from this release type: ComputeItemKey */

/**
 * Used for the custom components that accept the masonry context prop.
 */
export declare type ContextAwareComponent<Context = any> = React.ComponentType<{
    /**
     * The value currently passed to the `context` prop of the `VirtuosoMasonry` component.
     */
    context: Context;
}>;

/* Excluded from this release type: Data */

/**
 * A React component that's used to render the individual item.
 */
export declare type ItemContent<Data = any, Context = any> = React.ComponentType<{
    /**
     * The value of the `context` prop passed to the list.
     */
    context: Context;
    /**
     * The data item to render.
     */
    data: Data;
    /**
     * The index of the item in the list data array.
     */
    index: number;
}>;

/* Excluded from this release type: OffsetPoint */

/**
 * The DOM attributes that you can pass to the `VirtuosoMasonry` component to customize the scroll element.
 * @noInheritDoc
 */
export declare type ScrollerProps = Omit<React.HTMLProps<HTMLDivElement>, 'data' | 'onScroll' | 'ref'>;

/* Excluded from this release type: SizeRange */

export declare const VirtuosoMasonry: <Data, Context>(props: VirtuosoMasonryProps<Data, Context> & {
    ref?: NoInfer<React.Ref<Record<string, never>>>;
}) => React.ReactElement;

export declare interface VirtuosoMasonryProps<Data, Context> extends ScrollerProps {
    /**
     * The number of columns to be rendered. This prop is required.
     */
    columnCount: number;
    /**
     * Additional data to be passed to the item content component. This prop is optional.
     */
    context?: Context;
    /**
     * The data to be rendered. This prop is required.
     */
    data: Data[];
    /**
     * Use this prop for SSR rendering.
     */
    initialItemCount?: number;
    /**
     * A React component that's used to render the individual item. See {@link ItemContent} for further details on the accepted props.
     */
    ItemContent?: NoInfer<ItemContent<Data, Context>>;
    /**
     * Set to true to make the component use window scroll instead of the scroller element.
     */
    useWindowScroll?: boolean;
}

export { }