npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript.Learn more »

@davidisaaclee/react-measure-bounds

0.2.1 • Public • Published

react-measure-bounds

A React component which provides a way to measure its own bounding client rect.

<MeasureBounds>
  {(getBoundingClientRect) => (
    <button
      onClick={_ =>
        // getBoundingClientRect :: () -> Promise<DOMRect> 
        getBoundingClientRect()
          .then(bounds => console.log(`Bounds: ${bounds}`))}
    />
  )}
</MeasureBounds>
  • Batches measurements to requestAnimationFrame to minimize layout thrashing
  • Adds a wrapper DOM component to the hierarchy

Install

yarn add @davidisaaclee/react-measure-bounds

Development

# Clone repository. 
git clone https://github.com/davidisaaclee/react-measure-bounds
cd react-measure-bounds
 
# Build for ES modules and CommonJS. 
yarn build
 
# Run tests. 
yarn test

See also

  • fastdom: Batch DOM measurements / mutations to requestAnimationFrame calls. This library uses a sub-component BatchForAnimationFrame, which behaves similarly to fastdom.
  • ResizeObserver
  • CSS-Element-Queries

Keywords

none

install

npm i @davidisaaclee/react-measure-bounds

Downloadsweekly downloads

3

version

0.2.1

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability