Describe how to use 2.0.0-alpha1

[sontek]

I think this is related to:

#50

Basically, I'm using 1.3.0 and its working perfectly:

Dimensions()(FormContent)

but I have the warning:

Wrapper div has no height or width

which I based on github issues 2.0.0 was supposed to solve.

But now I have the problem that pretty much all my styling is 100% messed up and I'm not sure why. 1.3.0 didn't mess with my styling at all and thats what I expect from a HOC.

Can you document how to use this 2.0.0 version without having styles messed up? Right now I see it basically adds this container div with inline styles:

overflow: visible;height: 0px;width: 0px;

but those are really bad styles to be applying to a container div :)

[bagongkia]

+1

[steodor]

+1

[stephanembl]

+1

[sontek]

We wrote our own based on this that doesn't have any issues (and works with Chrome 64 ResizeObserver)

import React, { Children, Component } from 'react';

import { PropTypes } from 'prop-types';
import ResizeObserver from 'resize-observer-polyfill';
import debounce from 'lodash.debounce';
import invariant from 'invariant';
import omit from 'lodash.omit';
import pick from 'lodash.pick';

export default class ContainerDimensions extends Component {

    static propTypes = {
        children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,
        onResize: PropTypes.func
    };

    static defaultProps = {
        onResize: () => {}
    }

    static pickDimensions(object) {
        return pick(object, ["top", "right", "bottom", "left", "width", "height"]);
    }

    constructor(props) {
        super(props);

        this.state = {
            width: 1280
        };
    }

    componentWillMount() {
        this.resizeObserver = new ResizeObserver(debounce(this.handleResize, 10));
    }

    componentWillUnmount() {
        if (this.resizeObserver){
            this.resizeObserver.disconnect();
        }
    }

    handleResize = (entries, observer) => {
        const entry = entries[0];
        if (this.state.width !== entry.contentRect.width) {
            this.setState({
                ...ContainerDimensions.pickDimensions(entry.contentRect)
            }, () => {
                this.props.onResize();
            });
        }
    }

    renderChildren() {
        invariant(this.props.children, 'Expected children to be one of function or React.Element');

        const childrenProps = omit(this.state, ["initiated"]);

        if (typeof this.props.children === 'function') {
            const renderedChildren = this.props.children(childrenProps);
            return renderedChildren && Children.only(renderedChildren);
        }
        return Children.only(React.cloneElement(this.props.children, childrenProps));
    }

    render() {
        return (
            <div ref={(parent) => {
                if (this.resizeObserver) {
                    if (parent) {
                        this.resizeObserver.observe(parent);
                    } else {
                        this.resizeObserver.disconnect(this.parentNode);
                    }
                }
                this.parentNode = parent;
            }}
                className={
                    this.props.getClassName
                        ? this.props.getClassName(ContainerDimensions.pickDimensions(this.state))
                        : this.props.className
                }
            >
                {this.renderChildren()}
            </div>
        );
    }
}

We haven't looked at element-resize-event yet, but are considering it. What we have works good enough for us though.

[xlthor]

Setting the dim's of the wrapper to 0px is a real bad idea, even "auto" doesn't work good. I've cloned the source and after changing to

        const wrapperStyle = {
          overflow: 'visible',
          height: '100%',
          width: '100%'
        }

it worked smoothly!