react-measure
react-measure copied to clipboard
Failed prop type: Invalid prop `children` of type `object` supplied to `_class`, expected `function`
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>
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.