Hide

Hide is the inverse of Show. It renders its children only when the viewport is outside the breakpoint range — and like Show, it drops them from the tree when it does not.

What it is

A conditional wrapper keyed to the viewport width, with the match inverted. <Hide above="md"> renders below md and returns null at md and up. The above and below props mean the same thing they do on Show — Hide simply renders when Show would not.

Install

Hide is exported from usemotif. No separate install.

import { Hide } from 'usemotif';

API

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

Examples

A mobile-only menu button:

<Hide above="md">
<MobileMenuButton />
</Hide>

Hide a promo on the smallest screens:

<Hide below="sm">
<PromoBanner />
</Hide>

Picking Show or Hide

<Hide above="md"> and <Show below="md"> render in exactly the same range. Reach for whichever states the intent at the call site — "hide the mobile button on desktop" reads as Hide, "show the banner on large screens" reads as Show. The pair exists for readability; the result is the same.

Cross-platform notes

On web Hide evaluates the viewport width and renders or returns null. On native it uses the same model against the device's window dimensions. The children are dropped from the tree on both platforms — not hidden with CSS.