use-element-size

1import { useState } from 'react'
2import { useEffectWithTarget } from '@/registry/hooks/use-effect-with-target'
3import { getTargetElement } from '@/registry/lib/create-effect-with-target'
4import type { BasicTarget } from '@/registry/lib/create-effect-with-target'
5 
6export interface ElementSize {
7  width: number
8  height: number
9}
10 
11export interface UseElementSizeOptions {
12  /**
13   * ResizeObserver box model to use for measuring.
14   *
15   * @default 'content-box'
16   */
17  box?: ResizeObserverBoxOptions
18}
19 
20const defaultInitialSize: ElementSize = {
21  width: 0,
22  height: 0,
23}
24 
25type ResizeObserverBoxSize =
26  | ResizeObserverSize
27  | ReadonlyArray<ResizeObserverSize>
28 
29function toBoxSizeArray(
30  boxSize: ResizeObserverBoxSize | undefined,
31): readonly ResizeObserverSize[] {
32  if (!boxSize) {
33    return []
34  }
35 
36  return Array.isArray(boxSize)
37    ? boxSize
38    : ([boxSize] as readonly ResizeObserverSize[])
39}
40 
41function getSizeFromEntry(
42  entry: ResizeObserverEntry,
43  box: ResizeObserverBoxOptions,
44): ElementSize {
45  const boxSize =
46    box === 'border-box'
47      ? entry.borderBoxSize
48      : box === 'device-pixel-content-box'
49        ? entry.devicePixelContentBoxSize
50        : entry.contentBoxSize
51 
52  const sizes = toBoxSizeArray(boxSize)
53 
54  if (sizes.length > 0) {
55    return {
56      width: sizes.reduce((sum, size) => sum + size.inlineSize, 0),
57      height: sizes.reduce((sum, size) => sum + size.blockSize, 0),
58    }
59  }
60 
61  return {
62    width: entry.contentRect.width,
63    height: entry.contentRect.height,
64  }
65}
66 
67function isSvgElement(element: Element): element is SVGElement {
68  return typeof SVGElement !== 'undefined' && element instanceof SVGElement
69}
70 
71export function useElementSize(
72  target: BasicTarget<Element>,
73  initialSize: ElementSize = defaultInitialSize,
74  options: UseElementSizeOptions = {},
75): ElementSize {
76  const { box = 'content-box' } = options
77  const [size, setSize] = useState<ElementSize>(initialSize)
78 
79  const updateSize = (nextSize: ElementSize) => {
80    setSize((currentSize) => {
81      if (
82        currentSize.width === nextSize.width &&
83        currentSize.height === nextSize.height
84      ) {
85        return currentSize
86      }
87 
88      return nextSize
89    })
90  }
91 
92  useEffectWithTarget(
93    () => {
94      const element = getTargetElement(target)
95 
96      if (!element) {
97        updateSize({ width: 0, height: 0 })
98        return
99      }
100 
101      updateSize(initialSize)
102 
103      if (typeof ResizeObserver === 'undefined') {
104// … truncated