Do not require a component to wrap MediaQuery children

[jdlehman]

If a props.component was not explicitly defined and there is only 1 child inside the MediaQuery, just render the child instead of wrapping it in a div automatically.

This is a breaking change as it requires props.component to be explicitly defined if it only has one child, but it also provides more flexibility and makes it easier to limit unneeded "wrapper" DOM elements.

Example

The following:

<MediaQuery query="(min-width: 700px)">
  <MyComponent />
</MediaQuery>

will render

  <MyComponent />

instead of

  <div>
    <MyComponent />
  </div>

but

<MediaQuery query="(min-width: 700px)">
  <MyComponent />
  <MyComponent2 />
</MediaQuery>

still renders

 <div>
    <MyComponent />
    <MyComponent2 />
  </div>

[yocontra]

Needs documentation and then LGTM

[jdlehman]

Awesome, wanted to get thoughts first. I'll add docs now.

[jdlehman]

Let me know if I need to make any changes to the docs I added.

[yocontra]

What do you think about also rendering the component if any additional properties were defined on the MediaQuery element? I could see this being confusing:

<MediaQuery query="(min-width: 700px)" onClick={whatever}>
  <MyComponent />
</MediaQuery>

[jdlehman]

Definitely a valid concern. We could also pass additional properties directly to the element.

Perhaps something like (the else if is the added part):

if (this.props.component || this.props.children.length > 1) {
  return React.createElement(
    this.props.component || 'div',
    props,
    this.props.children
  );
} else if (props) {
  return React.cloneElement(this.props.children, props);
} else {
  return this.props.children;
}

[yocontra]

@jdlehman Wouldn't cloneWithProps solve this problem? When only one element is provided we can do cloneWithProps and that makes sure everything is passed through to the child

[jdlehman]

@contra cloneWithProps is deprecated in favor of cloneElement. See here.

[yocontra]

LGTM

[gaearon]

FYI children is an opaque data structure and its internal representation can change. It’s better to use React.Children.count(this.props.children).

[yocontra]

@gaearon Thanks for the heads up