Package Exports

react-use-measure

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-use-measure) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

yarn add react-use-measure

This small tool will measure the boundaries of a view you reference. It is reactive and responds to changes in size, window-scroll and nested-area-scroll. It uses the resize-observer-polyfill on platforms that do not support resize observers.

You can try a live demo here: https://codesandbox.io/s/musing-kare-4fblz

Usage

import useMeasure from 'react-use-measure'

function App() {
  const [ref, bounds] = useMeasure({ scroll: true })

  // consider that knowing bounds is only possible *after* the view renders
  // so you'll get zero values on the first run and be informed later

  return <div ref={ref} />
}

Api

interface RectReadOnly {
  readonly x: number
  readonly y: number
  readonly width: number
  readonly height: number
  readonly top: number
  readonly right: number
  readonly bottom: number
  readonly left: number
}

type Options = {
  debounce?: number | { scroll: number; resize: number }
  scroll?: boolean
}

useMeasure(
  options: Options = { debounce: 0, scroll: false }
): [React.MutableRefObject<HTMLElement>, RectReadOnly]

⚠️ Notes

useMeasure currently returns its own ref. We do this because we are using functional refs for unmount tracking. If you need to have a ref of your own on the same element, use react-merge-refs.