useResizeObserver

Category

Elements

Export Size

526 B

Last Changed

5 days ago

Reports changes to the dimensions of an Element's content or the border-box

Demo

Usage

import { useResizeObserver } from '@reause/core'
import { useRef, useState } from 'react'

const el = useRef<HTMLTextAreaElement | null>(null)
const [text, setText] = useState('')

useResizeObserver(el, (entries) => {
  const { width, height } = entries[0].contentRect
  setText(`width: ${width}, height: ${height}`)
})

Type Declarations

export type TargetElement = HTMLElement | SVGElement | undefined | null

export type ElementTarget<T extends TargetElement = TargetElement> = RefObject<T | null>

export type ElementTargetOrArray<T extends TargetElement = TargetElement> = ElementTarget<T> | ElementTarget<T>[]

export interface UseResizeObserverOptions extends ResizeObserverOptions, ConfigurableWindow {
}

export interface UseResizeObserverReturn {
    isSupported: boolean;
    stop: () => void;
}

export function useResizeObserver(target: ElementTargetOrArray, callback: ResizeObserverCallback, options?: UseResizeObserverOptions): UseResizeObserverReturn

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

1fdcc - fix(core): resolve useResizeObserver audit findings (#632)

ebeb0 - fix(core): resolve unrefElement audit findings (#515)

8fddc - chore!: remove all Vue-only Maybe* types and getter unions, adopt React Ref (#462)