Components / Control flow

Show

Show renders its children only when the viewport falls inside a breakpoint range. Outside the range it returns nothing — the children leave the tree entirely.

Loading playground…

What it is

A conditional wrapper keyed to the viewport width. above sets a lower bound, below sets an upper one, and the two can combine to bracket a band. When the viewport matches, Show renders its children; when it does not, Show returns null and the children — and their effects — are gone.

Install

Show is exported from usemotif. No separate install.

example.tsx

import { Show } from 'usemotif';

API

Show

stable

function Show(props: ShowHideProps): JSX.Element | null

above"sm" | "md" | "lg" | "xl" | "2xl"

Render only when the viewport is at or above this breakpoint.

below"sm" | "md" | "lg" | "xl" | "2xl"

Render only when the viewport is below this breakpoint. Combine with `above` to bracket a range.

childrenReactNode

Rendered only when the viewport matches.

Examples

A desktop-only sidebar:

example.tsx

<Show above="md">
<Sidebar />
</Show>

Content for a specific band — tablet only:

example.tsx

<Show above="sm" below="lg">
<TabletBanner />
</Show>

A Show / Hide pair branching one slot:

example.tsx

<Show above="md">
<DesktopNav />
</Show>
<Hide above="md">
<MobileNavButton />
</Hide>

Cross-platform notes

On web Show evaluates the viewport width and renders or returns null. On native it uses the same model against the device's window dimensions — the breakpoint names map to the same widths. The children are dropped from the tree on both platforms; this is not a CSS display toggle.