`useElementSize()`

Beta: this hook is in beta — its API may change in a future release.

Subscribes to the size of a DOM element using ResizeObserver, and returns its latest content and border box sizes. It replaces the deprecated useElementRect() hook.

import {useElementSize} from '@sanity/ui'
import {useState} from 'react'

function App() {
  const [element, setElement] = useState(null)
  const size = useElementSize(element)

  return (
    <div ref={setElement}>
      {size?.border.width} x {size?.border.height}
    </div>
  )
}

Signature

(element: HTMLElement | null) => {
  content: {width: number; height: number}
  border: {width: number; height: number}
} | null

Loading…

Made withby folks at

`useElementSize()`

Beta: this hook is in beta — its API may change in a future release.

Subscribes to the size of a DOM element using ResizeObserver, and returns its latest content and border box sizes. It replaces the deprecated useElementRect() hook.

import {useElementSize} from '@sanity/ui'
import {useState} from 'react'

function App() {
  const [element, setElement] = useState(null)
  const size = useElementSize(element)

  return (
    <div ref={setElement}>
      {size?.border.width} x {size?.border.height}
    </div>
  )
}

Signature

(element: HTMLElement | null) => {
  content: {width: number; height: number}
  border: {width: number; height: number}
} | null