import { MediaQuery } from '@uhg-abyss/web/ui/MediaQuery';

Usage

Used to conditionally display elements based on the window size. The condition is based on the smallerThan or largerThan props (or both of them at the same time).

Smaller than

Use the smallerThan prop to specify a width that the window must be smaller than for the contents inside the MediaQuery to display.

Larger than

Use the largerThan prop to specify a width that the window must be greater than or equal to for the contents inside the MediaQuery to display.

Preset breakpoints

As an alternative to using hardcoded number / pixel values for smallerThan and largerThan, you can use preset breakpoints to ensure consistency across your app. (Breakpoint values are taken from the app's theme configuration.) Possible values are xs, sm, md, and lg.

Responsive visibility props

As an alternative to the MediaQuery component, you can use the hiddenFrom and visibleFrom props to control the visibility of elements based on the screen size. These props are available on all Abyss components and use the same breakpoint values as described above.

MediaQuery Props

Name	Type	Default	Description
breakpoints	Record<string, string | number> | undefined	{ xs: 0, sm: 360, md: 744, lg: 1248 }	The breakpoints of MediaQuery component
children	string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined		The children of MediaQuery component
className	string | undefined		CSS class name to apply to each element within the component
css	CSSProperties | Partial<Record<never, CSSProperties>> | undefined		Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string | undefined		Suffix used to create a unique ID used for automated testing See Component Testing for more information
hiddenFrom	Breakpoint | undefined		When defined, the component is hidden once the screen width reaches the specified breakpoint.
largerThan	string | number | undefined		The pixel amount the window width must be greater than or equal to in order for the children to render
slotProps	Partial<Record<string, SlotPropsValue<string>>> | undefined		Props to pass to individual internal slots of the component, keyed by the slot name (e.g. 'button-root'). Supports className, css, style, aria-*, data-*, data-testid, and nested slotProps for child Abyss components. See slotProps for more information
smallerThan	string | number | undefined		The pixel amount the window width must be smaller than in order for the children to render
visibleFrom	Breakpoint | undefined		When defined, the component is hidden until the screen width reaches the specified breakpoint.