yarn add react-use-motion-measure

This small tool will measure the boundaries (for instance width, height, top, left) of a view you reference. It is reactive and responds to changes in size, window-scroll and nested-area-scroll.

This is fork of react-use-measure modified to use MotionValue (from Motion) instead of state. This allows to avoid unnecessary re-renders if you use element size/position only in animation. Everything else is same as in original package, for options and more info refer to its readme.

This project uses Motion as peer dependency, don't forget to install it.

You can try live demo here.

Usage

``jsx import useMotionMeasure from 'react-use-motion-measure'

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

// bounds.x, bounds.width, etc are MotionValue // and will be updated if component changes size

return

Api

`jsx interface MotionRectReadOnly { readonly x: MotionValue readonly y: MotionValue readonly width: MotionValue readonly height: MotionValue readonly top: MotionValue readonly right: MotionValue readonly bottom: MotionValue readonly left: MotionValue }

type Options = { // Debounce events in milliseconds debounce?: number | { scroll: number; resize: number } // React to nested scroll changes, don't use this if you know your view is static scroll?: boolean // You can optionally inject a resize-observer polyfill polyfill?: { new (cb: ResizeObserverCallback): ResizeObserver } // Measure size using offsetHeight and offsetWidth to ignore parent scale transforms offsetSize?: boolean }

useMotionMeasure( options: Options = { debounce: 0, scroll: false } ): [ref: React.MutableRefObject, bounds: MotionRectReadOnly, forceRefresh: () => void]``