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


Use case

Used to provide a safe ref to use when working with a forwardRef. The ref Object provided from useForwardedRef is stateful or in otherwords, will trigger a rerender when the current property changes.

How to install

npm install @bedrock-layout/use-forwarded-ref

Basic usage

import useForwardedRef from '@bedrock-layout/use-forwarded-ref';
const ForwardedRefDiv = React.forwardRef(props,ref)=>{
const innerRef = useForwardedRef(ref)
// do something with innerRef
return <div ref={innerRef} {...props}>

Then in your app you would use it like this:

const App = () => {
const ref = React.useRef(null);
return <ForwardedRefDiv ref={ref}>{...content}</ForwardedRefDiv>;


Checkout storybook for more details.