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


Use case

Used to verify certain breakpoints match the actual width of a DOM node. It corresponds to the breakpoints in the spacing-constants.

How to install

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

Basic usage

import useMatchMedia from '@bedrock-layout/use-match-media';
const Div = React.forwardRef(props,ref)=>{
const matchesObj = useMatchMedia()
// do something with matchesObj
return <div {...props}>


Checkout storybook for more details.