Btukfyl

I have two absolutely positioned sibling elements. I want to use react-measure to set the parent container to the width of the widest absolute element. I'm having a bit of trouble getting my head around how to do that.

You can't re-use the measureRef it seems, and if you nested two Measure components the props would collide? Nest them and rename the props in-between? Is there a less ugly way?

I think I figured this out, if you use the HOC withContentRect it's a little clearer:

const enhance = compose(

    withContentRect('bounds'),

    renameProp('contentRect', 'rect1'),

    renameProp('measureRef', 'ref1'),

    withContentRect('bounds'),

    renameProp('contentRect', 'rect2'),

    renameProp('measureRef', 'ref2'),

);



const Component = enhance(({ rect1, rect2, ref1, ref2 }) => {

    const width = Math.max(rect1.bounds.width || 0, rect2.bounds.width || 0) + 32;

    return (

        <div style={{position: relative, width }}>

            <div ref={ref1} style={{position: absolute}}>Foo</div>

            <div ref={ref2} style={{position: absolute}}>Bar</div>

        </div>

    );

}