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

Virtualized React component for rendering masonry layouts

/* Excluded from this release type: Data */

/**
 * A React component that's used to render the individual masonry item.
 * @typeParam Item - The type of items in the data array.
 * @typeParam Context - Optional contextual data passed from the parent component.
 * @group VirtuosoMasonry
 */
export declare type ItemContent<Item = any, Context = any> = React.ComponentType<{
    /**
     * The value of the `context` prop passed to the masonry.
     */
    context: Context;
    /**
     * The data item to render.
     */
    data: Item;
    /**
     * The index of the item in the 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.
 * @group VirtuosoMasonry
 */
export declare type ScrollerProps = Omit<React.HTMLProps<HTMLDivElement>, 'data' | 'onScroll' | 'ref'>;

/* Excluded from this release type: SizeRange */

/**
 * A React component for efficiently rendering large masonry/Pinterest-style layouts with variable-height items
 * distributed across multiple columns. Supports virtualization, window scrolling, and SSR.
 * @typeParam Data - The type of items in the data array passed to the component.
 * @typeParam Context - Optional contextual data passed to the ItemContent render callback.
 * @group VirtuosoMasonry
 */
export declare const VirtuosoMasonry: <Data, Context>(props: VirtuosoMasonryProps<Data, Context> & {
    ref?: NoInfer<React.Ref<Record<string, never>>>;
}) => React.ReactElement;

/**
 * Props for the VirtuosoMasonry component.
 * @typeParam Data - The type of items in the data array passed to the component.
 * @typeParam Context - Optional contextual data passed to the ItemContent render callback.
 * @group VirtuosoMasonry
 */
export declare interface VirtuosoMasonryProps<Data, Context> extends ScrollerProps {
    /**
     * The number of columns to be rendered. This prop is required.
     * The component distributes items across columns using a shortest-column-first algorithm.
     *
     * @example
     * ```tsx
     * <VirtuosoMasonry columnCount={3} data={items} />
     * ```
     */
    columnCount: number;
    /**
     * Additional data to be passed to the item content component. This prop is optional.
     */
    context?: Context;
    /**
     * The data array to be rendered. This prop is required.
     * Each item will be passed to the {@link ItemContent} component for rendering.
     *
     * @example
     * ```tsx
     * const items = [
     *   { id: 1, title: 'Item 1', imageUrl: '...' },
     *   { id: 2, title: 'Item 2', imageUrl: '...' },
     * ]
     * <VirtuosoMasonry data={items} columnCount={3} />
     * ```
     */
    data: Data[];
    /**
     * Use this prop for SSR rendering of a pre-defined amount of items.
     */
    initialItemCount?: number;
    /**
     * A React component that renders each individual item in the masonry grid.
     * Receives `data`, `index`, and `context` as props.
     *
     * @example
     * ```tsx
     * const MyItemContent: ItemContent<MyData> = ({ data, index }) => (
     *   <div style={{ padding: 8 }}>
     *     <img src={data.imageUrl} style={{ width: '100%' }} />
     *     <p>{data.title}</p>
     *   </div>
     * )
     *
     * <VirtuosoMasonry data={items} columnCount={3} ItemContent={MyItemContent} />
     * ```
     */
    ItemContent?: NoInfer<ItemContent<Data, Context>>;
    /**
     * Set to true to make the component use the document scroller instead of creating an element with `overflow-y: auto`.
     */
    useWindowScroll?: boolean;
}

export { }