VirtuosoMasonry

ItemContent

ItemContent<Data, Context> = React.ComponentType<{ context: Context; data: Data; index: number; }>

A React component that’s used to render the individual masonry item.

Type Parameters

Type Parameter	Default type	Description
Data	any	The type of items in the data array.
Context	any	Optional contextual data passed from the parent component.

---

ScrollerProps

ScrollerProps = Omit<React.HTMLProps<HTMLDivElement>, "data" | "onScroll" | "ref">

The DOM attributes that you can pass to the VirtuosoMasonry component to customize the scroll element.

---

VirtuosoMasonry

const VirtuosoMasonry: <Data, Context>(props) => ReactElement

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.

Type Parameters

Type Parameter	Description
Data	The type of items in the data array passed to the component.
Context	Optional contextual data passed to the ItemContent render callback.

Parameters

Parameter	Type
props	VirtuosoMasonryProps<Data, Context> & object

Returns

ReactElement

---

VirtuosoMasonryProps

Props for the VirtuosoMasonry component.

Extends

• ScrollerProps

Type Parameters

Type Parameter	Description
Data	The type of items in the data array passed to the component.
Context	Optional contextual data passed to the ItemContent render callback.

Properties

columnCount

number

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

---

context?: Context

Additional data to be passed to the item content component. This prop is optional.

---

data

Data[]

The data array to be rendered. This prop is required. Each item will be passed to the ItemContent component for rendering.

Example

tsx

---

initialItemCount?: number

Use this prop for SSR rendering of a pre-defined amount of items.

---

ItemContent?: NoInfer<ItemContent<Data, Context>>

A React component that renders each individual item in the masonry grid. Receives data, index, and context as props.

Example

tsx

---

useWindowScroll?: boolean

Set to true to make the component use the document scroller instead of creating an element with overflow-y: auto.