@_use/resizeobserver v0.1.0

useResizeObserver

A Custom Hook to observer the component resize.

• Returns: ref : RefObject<HTMLDivElement> width? : RefWidth height? : RefHeight

• Argument callback? : callback: (entry: DOMRectReadOnly) => void

Note: DOMRectReadOnly

Install

npm i @_use/resizeobserver

Usage

import useResizeObserver from '@_use/resizeobserver'

const DivResizeObserver = () => {

  const [ ref, width, height ] = useResizeObserver(e => {
    console.log(e)
  })
    console.log(width)

  return (<>
    <div ref={ref}>

    <div/>
  </>)
}

export default DivResizeObserver

Type

if you need useResizeObserver type, import inside UseResizeObserver braces with first letter capitalized.

import useResizeObserver, { UseResizeObserver } from '@_use/resizeobserver'

type RefWidth = number | undefined
type RefHeight = number | undefined

type UseResizeObserver = (  callback?: (entry: DOMRectReadOnly) => void) => [
  RefObject<HTMLDivElement>,
  RefWidth?, 
  RefHeight?
]