Bedrock Layout Primitives Home
Edit page
AppBoundaryCSS-ResetCenterColumnsCoverFrameGridInlineInlineClusterMasonryGridPadBoxReelSpacing ConstantsSplitStackSwitcheruseContainerQueryuseForwardedRefuseMatchContainerSizesUse caseHow to installBasic usageStorybookuseMatchMediauseMediaQueryuseStatefulRef
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.

The node provided to this hooks needs to be stateful or in other words should not come from React.useRef. Instead you can use React.useState and the @bedrock-layout/use-forwarded-ref is also stateful

How to install

npm install @bedrock-layout/use-match-container-sizes

Basic usage

import useMatchContainerSizes from '@bedrock-layout/use-match-container-sizes';
const Div = React.forwardRef(props,ref)=>{
const [node,setRef] = React.useState(null)
const matchesObj = useMatchContainerSizes(node)
// do something with matchesObj
return <div ref={setRef} {...props}>


Checkout storybook for more details.