useMatchContainerSizes
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 matchesObjreturn <div ref={setRef} {...props}>}
Storybook
Checkout storybook for more details.