Match

function Match(__namedParameters): Element | null;

Conditionally render content based on terminal dimensions.

Match evaluates a media query against the current terminal size and renders children when all conditions are met, or fallback otherwise. The component re-renders automatically on terminal resize.

All query props are combined with AND — every specified constraint must be satisfied for children to render.

Parameters

Parameter	Type
__namedParameters	MatchProps

Returns

Element | null

Examples

// Show wide layout on terminals ≥ 80 columns
<Match minColumns={80}>
  <HorizontalLayout />
</Match>

// With a fallback for narrow terminals
<Match minColumns={80} fallback={<CompactView />}>
  <FullView />
</Match>

// Compound query — width AND height
<Match minColumns={120} minRows={30}>
  <DashboardLayout />
</Match>

---

Extends

• MediaQueryInput

Properties

Property	Type	Description	Inherited from
children?	ReactNode	Content to render when the media query matches.	-
fallback?	ReactNode	Content to render when the media query does not match. Default null	-
maxColumns?	number	Maximum terminal width in columns (inclusive).	MediaQueryInput.maxColumns
maxRows?	number	Maximum terminal height in rows (inclusive).	MediaQueryInput.maxRows
minColumns?	number	Minimum terminal width in columns (inclusive).	MediaQueryInput.minColumns
minRows?	number	Minimum terminal height in rows (inclusive).	MediaQueryInput.minRows