ContainerQuery refactor with the "as" prop

Author: ZeeCoder

CHANGELOG.md

@@ -7,24 +7,29 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [3.0.0-alpha.2]
+
 ### Removed
 
 - `react-container-query`
-  - [BREAKING] Removed the "render" prop in favour of using children. (The
-    former was not even documented.)
-  - [BREAKING] Removed the `ResizeObserver` component in favour of the
+  - **[BREAKING]** Removed the "render" prop from ContainerQuery in favour of
+    using children. (The former was not even documented.)
+  - **[BREAKING]** Removed the `ResizeObserver` component in favour of the
     [react-resize-observer](https://github.com/ZeeCoder/react-resize-observer) and
     [use-resize-observer](https://github.com/ZeeCoder/use-resize-observer) packages.
-  - [BREAKING] Removed the default export. (Both ContainerQuery and withContainerQuery
+  - **[BREAKING]** Removed the default export. (Both ContainerQuery and withContainerQuery
     is still available as named exports.)
-  - [BREAKING] Removed the `stats` prop from ContainerQuery. (Use `meta` instead.)
+  - **[BREAKING]** Removed the `stats` prop from ContainerQuery. (Use `meta` instead.)
 
 ### Changed
 
 - `react-container-query`
   - `ContainerQuery` no longer returns with a "null" size object when a function
     is passed in as the children prop. Instead it returns with `{width: 0, height: 0}`
     initially, then updates with the observed container element.
+  - **[BREAKING]** `ContainerQuery` now renders a div root node by default, inside
+    of which it renders all children. (Also accepts an `as` prop to change the
+    tag type.)
 
 ## [3.0.0-alpha.1]
 
@@ -42,22 +47,22 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Removed
 
 - "test" script is now only in the root, instead of in every package.
-- [BREAKING] No longer testing for Node 7
+- **[BREAKING]** No longer testing for Node 7
 
 ### Changed
 
 - `container-query-meta-builder`
 
   - Removed the engines field package.json field
-  - [BREAKING] Removed the UMD build
+  - **[BREAKING]** Removed the UMD build
 
 - `postcss-container-query`
-  - [BREAKING] Minimum Node version lifted to v8
-  - [BREAKING] Dropped the `getJSON` option, and no json is saved by default.
+  - **[BREAKING]** Minimum Node version lifted to v8
+  - **[BREAKING]** Dropped the `getJSON` option, and no json is saved by default.
     The new behaviour is to use the ICSS `:export` syntax, which then can be
     imported through css-loader. (The meta object is still passed down in the
     postcss plugin messages in case it's needed.)
-  - [BREAKING] `saveMeta` is removed
+  - **[BREAKING]** `saveMeta` is removed
 
 ## [2.7.4]
 

packages/react-container-query/src/ContainerQuery.js

@@ -1,22 +1,23 @@
 import React, { Component } from "react";
-import ReactDOM from "react-dom";
 import PropTypes from "prop-types";
 import Container from "@zeecoder/container-query";
 
-export default class ContainerQuery extends Component {
+class ContainerQuery extends Component {
   constructor(props) {
     super(props);
 
-    this.state = { width: 0, height: 0 };
-
-    this.containerOptions = { ...this.props.options };
+    this.options = { ...this.props.options };
 
     // Listen to size changes only if needed
     if (typeof this.props.children === "function") {
-      this.containerOptions.handleResize = this.handleResize;
+      this.options.handleResize = this.handleResize;
     }
   }
 
+  state = { width: 0, height: 0 };
+
+  ref = React.createRef();
+
   handleResize = size => {
     if (this.__willUnmount) {
       return;
@@ -25,33 +26,33 @@ export default class ContainerQuery extends Component {
     this.setState(size);
   };
 
-  instantiateContainer() {
-    if (!this.props.meta) {
-      return;
-    }
-
-    const element = this.props.element || ReactDOM.findDOMNode(this);
-    if (element && this.element !== element) {
-      this.element = element;
-      new Container(this.element, this.props.meta, this.containerOptions);
-    }
-  }
-
   componentDidMount() {
-    this.instantiateContainer();
-  }
-
-  componentDidUpdate() {
-    this.instantiateContainer();
+    new Container(this.ref.current, this.props.meta, this.options);
   }
 
   componentWillUnmount() {
     this.__willUnmount = true;
   }
 
   render() {
+    // Removing all props only used by this component, and only passing
+    // through the rest that was supposedly meant for the wrapped child
+    const { options, as, meta, children, ...props } = this.props;
+
+    // Needs to start with a capital letter for the jsx compiler.
+    // @see https://stackoverflow.com/a/38823404
+    const TagName = as;
+
+    return (
+      <TagName {...props} ref={this.ref}>
+        {this.doRender()}
+      </TagName>
+    );
+  }
+
+  doRender() {
     if (typeof this.props.children === "function") {
-      return this.props.children(this.state.size);
+      return this.props.children(this.state);
     } else if (this.props.children) {
       return this.props.children;
     }
@@ -61,12 +62,15 @@ export default class ContainerQuery extends Component {
 }
 
 ContainerQuery.defaultProps = {
-  meta: null,
-  options: {}
+  options: {},
+  as: "div"
 };
 
 ContainerQuery.propTypes = {
-  meta: PropTypes.object,
   options: PropTypes.object,
-  children: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
+  as: PropTypes.string,
+  meta: PropTypes.object.isRequired,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired
 };
+
+export default ContainerQuery;