souporserious/react-measure

Failed prop type: Invalid prop `children` of type `object` supplied to `_class`, expected `function`

Opened this issue ยท 4 comments

I'm getting this warning in the console whenever I try to use this library. It works perfectly but it still spits out this warning.

Warning: Failed prop type: Invalid prop `children` of type `object` supplied to `_class`, expected `function`.

This is a simplified version of how I'm using it:

class Wrapper extends Rect.Component {
  componentWillRecieveProps() {
    console.log('contentRect', nextProps.contentRect); // This works fine
  }

  render() {
    return (
      <div ref={this.props.measureRef}>
         {this.props.children}
      </div>
    )
  }
}

const WithMeasure = withContentRect('bounds')(Wrapper);
<WithMeasure>
  <button>My Button</button>
</WithMeasure>
kkir commented

you can wrap Measure in HOC:

import React from 'react';
import Measure from 'react-measure';

const withMeasure = measurments => BaseComponent => props => (
  <Measure {...[].concat(measurments).reduce((obj, m) => ({ ...obj, [m]: true }), {})}>
    {({ contentRect, measure, measureRef }) => (
      <BaseComponent {...props} {...{ contentRect, measure, measureRef }} />
    )}
  </Measure>
);

export default withMeasure;

and use it after:

withMeasure('bounds')(Component);
// or
withMeasure(['bounds', 'offset'])(Component);

I'm getting this exact error message when invoking the withContentRect HOC.

const addPropsToChildren = (children, props) =>
	Children.map(children, child => cloneElement(child, props));

const Scrollbox = styled.div``;

const ScrollTracker = withContentRect("bounds")(
	({ measureRef, height, children }) => (
		<Scrollbox innerRef={measureRef}>
			{addPropsToChildren(children, { height })}
		</Scrollbox>
	),
);

As far as I can tell, I am using the HOC correctly, the onResize handler gets called and updates the state, height is correct and gets updated, everything seems to work - but I keep getting the proptype error.

Looks like children propType should be added in Measure.jsx instead of with-content-rect.js
I can send a PR

I refactored to use the component instead, and got rid of the error.