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

useContainerQuery

Use case

Used to verify the actual width of a DOM node, allowing you to do logic based on that.

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-container-query

Basic usage

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

Or you can provide a range

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

Storybook

Checkout storybook for more details.