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

npm install resize-observer-polyfill react-use-measure

This small tool will measure the bounds of the view you reference. It is reactive and responds to size (or scroll) changes that affect the views size or position.

Usage

import useMeasure from 'react-use-measure'
// This step is optional, resize observers are supported by most browsers
// See: https://caniuse.com/#feat=resizeobserver
import ResizeObserver from 'resize-observer-polyfill'

function App() {
  const [ref, bounds] = useMeasure()

  // 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} />
}

const ref = useRef()
const bounds = useMeasure(ref)
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
}

useMeasure(
  ref?: React.MutableRefObject<HTMLDivElement>
): [React.MutableRefObject<HTMLDivElement>, RectReadOnly]