@jcoreio/react-use-measure v1.2.0

@jcoreio/react-use-measure

React hook for performing DOM measurements. Uses resize-observer-polyfill if necessary.

Usage

import * as React from 'react'
import useMeasure, { getBoundingContentRect } from 'react-use-measure'

const MyComp = () => {
  const [ref, bounds] = useMeasure(getBoundingContentRect)

  return (
    <div ref={ref}>
      My width is: {bounds?.width}
      My height is: {bounds?.height}
    </div>
  )
}

useMeasure<E extends Element, M>(measureFn, options)

declare function useMeasure<E extends Element, M>(
  measure: (element: E) => M,
  options?: {
    key?: string | number | null
    deactivate?: boolean
    throttle?: number
  }
): [(element: E | null) => any, M | null | undefined, { remeasure: () => void }]

measureFn ((el: E) => M, required)

The function to perform the DOM measurements you want.

@jcoreio/react-use-measure exports getBoundingClientRect and getOffsetRect that you can use.

options.key (string | number, optional)

A key for the measurement. Change the key if you want to reset the measurement for any reason; it will be reset to null until the next time measureFn is called.

options.throttle (number, optional, default: 100)

Wait time to throttle calls to measureFn.

options.deactivate (boolean, optional, default: true)

If true, will disable the ResizeObserver.

Returns

An array with three elements:

• measureRef - pass this as the ref to the element you want to measure
• bounds - the most recent measaurement returned by measureFn (may be null)
• api - an object with the following properties:
  • remeasure - call this to force remeasurement