Bedrock Layout Primitives Home
Edit page
Components
AppBoundaryCSS-ResetCenterColumnsCoverFrameGridInlineClusterPadBoxReelSpacing ConstantsSplitStackSwitcheruseContainerQueryuseForwardedRefuseMatchContainerSizesuseMatchMediauseMediaQueryUse caseHow to installBasic usageStorybookuseStatefulRef
HomeInspirationLayout PrimitivesRegarding IE11Why Styled Components?

useMediaQuery

Use case

When you need to do logic based on the size of the viewport, such as determining whether to use a mobile layout or full screen layout. It uses the matchMedia API, taking a value and returning a boolean for whether the viewport size is less than or equal to that value.

How to install

npm install @bedrock-layout/use-media-query

Basic usage

import useMediaQuery from '@bedrock-layout/use-media-query';
const App = () => {
const smallScreen = useMediaQuery("(max-width:640px)")
return (
<div ref={setRef} {...props}>
{smallScreen ? <MobileNav /> : <FullScreenNav />}
</div>
)
}

Storybook

Checkout storybook for more details.