npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

adazzle-react-measure

v2.0.2

Published

Compute measurements of React components.

Downloads

7

Readme

React Measure

npm version Dependency Status

Compute measurements of React components. Uses resize-observer-polyfill to detect changes of an element and return the new dimensions.

Install

yarn add react-measure

npm install react-measure --save

<script src="https://unpkg.com/react-measure/dist/react-measure.js"></script>
(UMD library exposed as `Measure`)

Measure Component

Wrap any child component and calculate its client rect.

Props

client: PropTypes.bool

Adds the following to contentRect.client returned in the child function.

clientTop, clientLeft, clientWidth, and clientHeight.

offset: PropTypes.bool

Adds the following to contentRect.offset returned in the child function.

offsetTop, offsetLeft, offsetWidth, and offsetHeight.

scroll: PropTypes.bool

Adds the following to contentRect.scroll returned in the child function.

scrollTop, scrollLeft, scrollWidth, and scrollHeight.

bounds: PropTypes.bool

Uses getBoundingClientRect to calculate the element rect and add it to contentRect.bounds returned in the child function.

margin: PropTypes.bool

Uses getComputedStyle to calculate margins and add it to contentRect.margin returned in the child function.

innerRef: PropTypes.func

Use this to access the internal component ref.

onResize: PropTypes.func

Callback invoked when either element width or height have changed.

children: PropTypes.func

Children must be a function. Will receive the following object shape:

  • measureRef: must be passed down to your component's ref in order to obtain a proper node to measure

  • measure: use to programmatically measure your component, calls the internal measure method in withContentRect

  • contentRect: this will contain any of the following allowed rects from above: client, offset, scroll, bounds, or margin. It will also include entry from the ResizeObserver when available.

Example

import Measure from 'react-measure'
import classNames from 'classnames'

class ItemToMeasure extends Component {
  state = {
    dimensions: {
      width: -1,
      height: -1
    }
  }

  render() {
    const { width, height } = this.state.dimensions
    const className = classNames(
      (width < 400) && 'small-width-modifier'
    )

    return (
      <Measure
        bounds
        onResize={(contentRect) => {
          this.setState({ dimensions: contentRect.bounds })
        }}
      >
        {({ measureRef }) =>
          <div ref={measureRef} className={className}>
            I can do cool things with my dimensions now :D

            { (height > 250) &&
              <div>Render responsive content based on the component size!</div>
            }
          </div>
        }
      </Measure>
    )
  }
}

withContentRect(types) HoC

A higher-order component that provides dimensions to the wrapped component. Accepts types, which determines what measurements are returned, similar to above. Then returns a function to pass the component you want measured.

Pass an array or single value of either client, offset, scroll, bounds, or margin to calculate and receive those measurements as the prop contentRect in your wrapped component. You can also use the measure function passed down to programmatically measure your component if you need to. And finally, remember to pass down the measureRef to the component you want measured.

Passes down the same props as the Measure child function above, measureRef, measure, and contentRect.

Fun fact, the Measure component is a thin wrapper around withContentRect. Just check the source. This means your wrapped component will accept the same props as Measure does 😊

Example

import { withContentRect } from 'react-measure'

const ItemToMeasure = withContentRect('bounds')(({ measureRef, measure, contentRect }) => (
  <div ref={measureRef}>
    Some content here
    <pre>
      {JSON.stringify(contentRect, null, 2)}
    </pre>
  </div>
))

Run Example

clone repo

git clone [email protected]:souporserious/react-measure.git

move into folder

cd ~/react-measure

install dependencies

npm install

run dev mode

npm run dev

open your browser and visit: http://localhost:8080/