seitu/dist/web/element-size/index.d.mts

import { i as Subscribable, r as ServerReadable } from "../../index-B0IeflOl.mjs";
//#region src/web/element-size/index.d.ts
interface ElementSizeValue {
  width: number;
  height: number;
}
interface ElementSize extends Subscribable<ElementSizeValue>, ServerReadable<ElementSizeValue> {}
interface ElementSizeOptions {
  /**
   * Element to observe, or a getter. The getter is resolved once, when the
   * first subscriber attaches; a later change to what it returns is not
   * tracked. In React pass the element from a callback ref and list it in
   * `deps` so the subscription is rebuilt on mount, unmount, and remount.
   */
  element: Element | null | (() => Element | null);
  /**
   * Which box to measure, same as `ResizeObserver`'s `box` option.
   * @default 'border-box'
   */
  box?: 'content-box' | 'border-box';
}
/**
 * Tracks an element's width and height through `ResizeObserver`. Sizes ignore
 * CSS transforms. A null element and the server snapshot are `0 × 0`.
 *
 * @example Vanilla
 * ```ts twoslash
 * import { createElementSize } from 'seitu/web'
 *
 * const size = createElementSize({
 *   element: document.querySelector('.container'),
 * })
 *
 * size.subscribe(({ width, height }) => {
 *   console.log(width, height)
 * })
 *
 * const { width } = size.get()
 * console.log(width)
 * ```
 *
 * @example React (callback ref)
 * ```tsx twoslash title="page.tsx"
 * 'use client'
 *
 * import * as React from 'react'
 * import { createElementSize } from 'seitu/web'
 * import { useSubscription } from 'seitu/react'
 *
 * function Panel() {
 *   const [ref, setRef] = React.useState<HTMLDivElement | null>(null)
 *   const size = useSubscription(() => createElementSize({
 *     element: ref,
 *   }), { deps: [ref] })
 *
 *   return (
 *     <div ref={setRef}>
 *       {size.width} × {size.height}
 *     </div>
 *   )
 * }
 * ```
 */
declare function createElementSize(options: ElementSizeOptions): ElementSize;
//#endregion
export { ElementSize, ElementSizeOptions, ElementSizeValue, createElementSize };