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

npm