@bedrock-layout/use-resize-observer
Hook that is great for registering a callback that will be called if an associated node is resized. Uses the ResizeObserver API.
Full docs at: bedrock-layout.dev
Usage
useResizeObserver
takes a callback that accepts a ResizeObserverEntry
and will return a ref object to assign the appropriate node.
import { useResizeObserver } from '@bedrock-layout/use-resize-observer';
function Component(props){
const ref = useResizeObserver((entry) => {
/* do something with entry */
})
return <div ref={ref} {...props}>
}
Optionally, if you already have a node from a ref you are using you can pass it in as a second argument. Note: If you choose to use it this way, the node must be stateful either by using @bedrock-layout/use-stateful-ref
or using a React.useState
hook with the ref. If you are using the returned ref object, the node passed in will be ignored.
import { useResizeObserverc} from '@bedrock-layout/use-resize-observer';
import { useStatefulRef } from '@bedrock-layout/use-stateful-ref';
function Component(props){
const statefulRef = useStatefulRef()
const ref = useResizeObserver((entry) => {
/* do something with entry */
}, statefulRef.current)
return <div ref={statefulRef} {...props}>
}