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

useMatchMedia

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}>
}

Storybook

Checkout storybook for more details.