MosaicShow
Tiling

MosaicShow

Renders its children only while the enclosing tile is big enough for them.

Component behavior

MosaicShow renders children only when the enclosing tile meets the specified size bounds. Content outside those bounds is unmounted.

MosaicShow conditionally renders content by tile size. Use useMosaicTile when rendering requires computed dimensions.

Props

MosaicShowProps props
PropTypeDefaultDescription
minWnumber—Narrowest cell, in columns, that still renders the children.
maxWnumber—Widest cell, in columns.
minHnumber—Shortest cell, in rows.
maxHnumber—Tallest cell, in rows.
minWidthnumber—Narrowest cell in px. Ignored until the board is measured.
maxWidthnumber—Widest cell in px. Ignored until the board is measured.
minHeightnumber—Shortest cell in px. Derived from the row height, so it is known immediately.
maxHeightnumber—Tallest cell in px.
minSize"xs" | "sm" | "md" | "lg" | "xl"—Smallest width bucket that still renders the children.
maxSize"xs" | "sm" | "md" | "lg" | "xl"—Largest width bucket.
fallbackReactNodenullRendered instead of the children when the tile is outside the bounds.
childrenReactNode—What the tile shows while it is big enough.

Bounds

All bounds are optional and must be satisfied together. minW, maxW, minH, and maxH use grid cells. minWidth, maxWidth, minHeight, and maxHeight use pixels.

minSize and maxSize accept width categories: xs, sm, md, lg, or xl. The tile also exposes its category through data-size for CSS selectors.

Drag the tile's right edge in and out
UsageTSX
<MosaicTile id="traffic" title="Requests">
  <Text size="3xl">{total}</Text>

  {/* Gone below ~200px: a sparkline that narrow is a smudge. */}
  <MosaicShow minSize="sm">
    <Sparkline values={series} />
  </MosaicShow>

  {/* Only where there is room to read a sentence. */}
  <MosaicShow minSize="lg">
    <Text size="xs">{summary}</Text>
  </MosaicShow>
</MosaicTile>

Fallback content

fallback renders in place of the children instead of leaving a hole, so one tile can carry two designs.

FallbackTSX
<MosaicShow minW={6} fallback={<Kpi value={uptime} />}>
  <LineChart series={series} height={height} />
</MosaicShow>

Initial rendering

Pixel bounds are ignored until the board is measured. Server rendering and the first client render use cell bounds only. Before measurement, size categories derive from the tile's share of grid columns.

Import

ImportTSX
import { MosaicGrid, MosaicTile, MosaicShow } from "@solarius/onset";