Reference
Types
TypeScript types exported from masonix and masonix/virtual.
Core entry
import type {
MasonryProps,
MasonryBalancedProps,
MasonryCommonProps,
MasonryLayoutMode,
MasonryRenderProps,
ResponsiveValue,
PositionedItem,
Positioner,
UseItemHeightsResult,
UsePositionerOptions,
} from 'masonix';Virtual entry
import type {
MasonryInitialScrollPosition,
MasonryScrollAlign,
MasonryScrollOptions,
MasonryScrollToIndexOptions,
MasonryVirtualProps,
MasonryVirtualHandle,
MasonryVirtualRange,
ScrollerState,
UseScrollToIndexOptions,
} from 'masonix/virtual';The option and result interfaces for every exported hook are public so wrapper libraries do not need to duplicate Masonix signatures.
Generic components
Components are generic over the item type.
type Photo = {
id: string;
src: string;
width: number;
height: number;
};
<MasonryBalanced<Photo>
items={photos}
itemKey={(photo) => photo.id}
render={({ data }) => <img src={data.src} alt="" />}
/>;MasonryLayoutMode
type MasonryLayoutMode = 'fallback' | 'native';MasonryLayoutMode reports the engine currently used by the lightweight
Masonry component.
PositionedItem
interface PositionedItem {
index: number;
top: number;
left: number;
width: number;
height: number;
column: number;
}PositionedItem is useful when building custom diagnostics or layout tooling.