Show / Hide

Show or hide content by screen width, with CSS on web (no flash during SSR), plus useBreakpoint and useBreakpointValue.

Stable

Web

iOS

Android

@advui/core

Source

Installation

Package

CLI (copy source)

pnpm

pnpm add @advui/core

npm

npm install @advui/core

Usage

import { Hide, Show, useBreakpointValue } from '@advui/core'

<Show above="md"><DesktopNav /></Show>        // width ≥ md
<Show below="md"><MenuButton /></Show>        // width < md
<Show above="sm" below="lg">…</Show>          // sm ≤ width < lg
<Hide below="sm">…</Hide>

const rows = useBreakpointValue({ base: 3, md: 10 })

Examples

useBreakpoint and useBreakpointValue

How many items to preview at each width. The grid itself uses responsive props.

Preview

Code

Breakpoint

Showing 2 of 6

Kachin

Shan

API reference

Show

Renders its children only while the window is in the range. On web the wrapper is `display: contents`, so it does not change the layout.

Prop	Type	Default	Description
`above`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'`	—	Shown from this breakpoint up (width ≥ the breakpoint). Give `above`, `below` or both.
`below`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'`	—	Shown below this breakpoint (width < the breakpoint). With `above`, it must be larger.

Hide

The opposite of Show: renders its children except while the window is in the range.

Prop	Type	Default	Description
`above`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'`	—	Hidden from this breakpoint up (width ≥ the breakpoint). Give `above`, `below` or both.
`below`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'`	—	Hidden below this breakpoint (width < the breakpoint). With `above`, it must be larger.

useBreakpoint()

The largest breakpoint the window matches: `'base' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'` (`'base'` below 460px). It re-renders when that changes.

useBreakpointValue(value)

The value of a responsive map at the current breakpoint, with the same mobile-first cascade as the layout props: `useBreakpointValue({ base: 3, md: 10 })` is 3 below md and 10 from md. `undefined` below the first breakpoint of a map without `base`.

Accessibility

Hidden content is hidden from screen readers too: display: none on web, not rendered on iOS and Android.
Show the same content in another form at each width (links or a menu), so nobody loses access to it.

Responsive behavior

Breakpoints are min-widths from @advui/theme: xs 460, sm 640, md 768, lg 1024, xl 1280, xxl 1536. above="md" is width ≥ 768; below="md" is width < 768. The hooks see a phone (xs) on the first server render and correct themselves after hydration, so lay pages out with Show / Hide or responsive props, which are CSS on web, and keep the hooks for behavior.

Platform notes

Web

CSS media queries hide the content, so the server renders the right thing at every width, with no flash and no hydration mismatch. Hidden children stay mounted (their state survives a resize).

iOS

Reads the window size with useMedia() and renders nothing while hidden: hidden children are unmounted, so their state resets when they come back.