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.

MediaQuery Props

Prop Name	Type	Default	Description
breakpoints	shape	-	The breakpoints of MediaQuery component
children	ReactNode	-	The element the group wraps
largerThan	number | string	-	Pixel amount the window width must be greater than or equal to in order for the children to render
smallerThan	number | string	-	Pixel amount the window width must be smaller than in order for the children to render