useMosaicTile
Hooks

useMosaicTile

Returns the enclosing tile's cell, read from inside its content.

Signature

useMosaicTile returns the enclosing MosaicTile cell dimensions. Use w and h to adapt content to the tile layout.

SignatureTypeScript
function useMosaicTile(): MosaicTileState | null;
MosaicTileState props
PropTypeDefaultDescription
idstring—The tile's id, the same one in the layout entry.
xnumber—Left edge, in columns.
ynumber—Top edge, in rows.
wnumber—Width in columns. The number to branch on when content should simplify as it narrows.
hnumber—Height in rows.
cellHeightnumber—Outer tile height, in pixels, including row gaps. Subtract header and padding for content height.
activeboolean—True while a drag or resize is in progress on this tile. Use it to skip expensive rendering mid-gesture.
pinnedboolean—Whether the layout entry is static.
editableboolean—Whether the enclosing grid is in edit mode.
columnsnumber—The grid's column count, so w can be read as a fraction of the grid.
rowHeightnumber—The grid's row height in px.
gapnumber—The grid's gutter in px.
cellWidthnumber—The measured tile width in pixels.
size"xs" | "sm" | "md" | "lg" | "xl"—The responsive size bucket derived from the tile bounds.

Usage

Sizing a chart to the cell

cellHeight is the full outer tile height. Subtract header and padding dimensions when deriving an inner chart height.

Chart heightTSX
function useChartHeight(chrome = 74) {
  const tile = useMosaicTile();
  return Math.max(60, (tile?.cellHeight ?? 240) - chrome);
}

function TrafficChart() {
  return <AreaChart height={useChartHeight()} series={series} labels={hours} />;
}

Conditional content

Use w to select content by the tile width in columns.

Responsive contentTSX
function Throughput() {
  const tile = useMosaicTile();
  const w = tile?.w ?? 4;

  if (w < 3) return <Stat value="8.4k" label="req/s" />;
  return (
    <>
      <Stat value="8.4k" label="req/s" />
      <Sparkline values={values} width={w * 26} />
      {w >= 7 ? (
        <Text size="xs">Peak 14.2k at 19:40 · +12% vs yesterday</Text>
      ) : null}
    </>
  );
}