useResizeObserver

import React from 'react'
import {useResizeObserver} from '@primer/react'


export default function Default() {
  const [width, setWidth] = React.useState<number | undefined>()
  const [height, setHeight] = React.useState<number | undefined>()
  const wrapperRef = React.useRef<HTMLDivElement>(null)
  useResizeObserver(resizeObserverEntries => {
    if (resizeObserverEntries.length) {
      const {contentRect} = resizeObserverEntries[0]
      setWidth(contentRect.width)
      setHeight(contentRect.height)
    }
  }, wrapperRef)


  return (
    <div ref={wrapperRef} style={{resize: 'both', overflow: 'hidden', width: '300px', border: '1px solid'}}>
      Resize me! {width && height ? `I am ${width}px wide and ${height}px tall` : null}
    </div>
  )
}

import React from 'react'
import {useResizeObserver} from '@primer/react'


export default function DepsArray() {
  const [width, setWidth] = React.useState<number | undefined>()
  const [height, setHeight] = React.useState<number | undefined>()
  const [resizeEnabled, setResizeEnabled] = React.useState(false)
  const wrapperRef = React.useRef<HTMLDivElement>(null)
  useResizeObserver(
    resizeObserverEntries => {
      if (!resizeEnabled) {
        return
      }


      if (resizeObserverEntries.length) {
        const {contentRect} = resizeObserverEntries[0]
        setWidth(contentRect.width)
        setHeight(contentRect.height)
      }
    },
    wrapperRef,
    [resizeEnabled],
  )


  return (
    <>
      <button
        onClick={() => {
          setResizeEnabled(!resizeEnabled)
        }}
      >
        Toggle useResizeObserver behavior
      </button>
      <div
        ref={wrapperRef}
        style={{resize: resizeEnabled ? 'both' : undefined, overflow: 'hidden', width: '300px', border: '1px solid'}}
      >
        <p>Enable useResizeObserver behavior to resize me!</p>
        <p>{width && height ? `I am ${width}px wide and ${height}px tall` : null}</p>
      </div>
    </>
  )
}