masonix
Reference

Types

TypeScript types exported from masonix and masonix/virtual.

Core entry

import type {
  MasonryProps,
  MasonryBalancedProps,
  MasonryRenderProps,
  ResponsiveValue,
  PositionedItem,
  Positioner,
} from 'masonix';

Virtual entry

import type {
  MasonryVirtualProps,
  MasonryVirtualHandle,
  MasonryVirtualRange,
} from 'masonix/virtual';

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="" />}
/>;

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.

On this page