element prop on the ContainerQuery component

Author: ZeeCoder

packages/container-query-meta-builder/src/constants.js

@@ -0,0 +1,14 @@
+export const CONDITIONS = "a";
+export const ELEMENTS = "b";
+export const VALUES = "c";
+export const STYLES = "d";
+export const SELECTOR = "e";
+export const QUERIES = "f";
+
+// Debugging
+// export const CONDITIONS = "conditions";
+// export const ELEMENTS = "elements";
+// export const VALUES = "values";
+// export const STYLES = "styles";
+// export const SELECTOR = "selector";
+// export const QUERIES = "queries";

packages/container-query-meta-builder/src/index.js

@@ -2,22 +2,24 @@ import objectAssign from "object-assign";
 import isValueUsingContainerUnits from "./isValueUsingContainerUnits";
 import getConditionsFromQueryParams from "./getConditionsFromQueryParams";
 import remapMetaSelectors from "./remapMetaSelectors";
-
-export { remapMetaSelectors };
-
-export const CONDITIONS = "a";
-export const ELEMENTS = "b";
-export const VALUES = "c";
-export const STYLES = "d";
-export const SELECTOR = "e";
-export const QUERIES = "f";
-
-// export const CONDITIONS = "conditions";
-// export const ELEMENTS = "elements";
-// export const VALUES = "values";
-// export const STYLES = "styles";
-// export const SELECTOR = "selector";
-// export const QUERIES = "queries";
+import {
+  CONDITIONS,
+  ELEMENTS,
+  VALUES,
+  STYLES,
+  SELECTOR,
+  QUERIES
+} from "./constants";
+
+export {
+  remapMetaSelectors,
+  CONDITIONS,
+  ELEMENTS,
+  VALUES,
+  STYLES,
+  SELECTOR,
+  QUERIES
+};
 
 const isEmpty = obj => Object.keys(obj).length === 0;
 

packages/container-query-meta-builder/src/remapMetaSelectors.js

@@ -1,4 +1,4 @@
-import { SELECTOR, QUERIES, ELEMENTS } from "./index";
+import { SELECTOR, QUERIES, ELEMENTS } from "./constants";
 
 /**
  * Runs through all selectors of a meta object.

packages/react-container-query/README.md

@@ -44,6 +44,7 @@ through the [postcss plugin](https://github.com/ZeeCoder/container-query/tree/ma
 A render-prop approach.
 
 ```js
+import React, { Component } from "react";
 import { ContainerQuery } from "@zeecoder/react-container-query";
 import { meta } from "./App.pcss";
 
@@ -59,6 +60,7 @@ export default App;
 If you're also interested in the component's size:
 
 ```js
+import React, { Component } from "react";
 import { ContainerQuery } from "@zeecoder/react-container-query";
 import { meta } from "./App.pcss";
 
@@ -75,6 +77,56 @@ const App = () => (
 export default App;
 ```
 
+As you can see the ContainerQuery component automatically picks up the child
+element as the Container.
+
+To do this, the component internally calls `ReactDOM.findDOMNode(this)`.
+If you want to avoid that, you can also pass in the `element` prop:
+
+```js
+import React, { Component } from "react";
+import { ContainerQuery } from "@zeecoder/react-container-query";
+import { meta } from "./App.pcss";
+
+class App extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      element: null
+    };
+
+    this.ref = React.createRef();
+  }
+
+  updateElementFromRef() {
+    if (this.state.element !== this.ref.current) {
+      this.setState({ element: this.ref.current });
+    }
+  }
+
+  componentDidMount() {
+    this.updateElementFromRef();
+  }
+
+  componentDidUpdate() {
+    this.updateElementFromRef();
+  }
+
+  render() {
+    return (
+      <ContainerQuery meta={meta} element={this.state.element}>
+        <div className="App" ref={this.ref}>
+          My App
+        </div>
+      </ContainerQuery>
+    );
+  }
+}
+
+export default App;
+```
+
 ### `withContainerQuery`
 
 If you prefer Higher-Order Components:

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

@@ -22,28 +22,27 @@ export default class ContainerQuery extends Component {
       return;
     }
 
-    this.setState({ size });
+    this.setState(size);
   };
 
-  componentDidMount() {
+  instantiateContainer() {
     if (!this.props.meta) {
       return;
     }
 
-    this.lastContainer = ReactDOM.findDOMNode(this);
-    new Container(this.lastContainer, this.props.meta, this.containerOptions);
+    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);
+    }
   }
 
-  componentDidUpdate() {
-    if (!this.props.meta) {
-      return;
-    }
+  componentDidMount() {
+    this.instantiateContainer();
+  }
 
-    const element = ReactDOM.findDOMNode(this);
-    if (this.lastContainer !== element) {
-      this.lastContainer = element;
-      new Container(this.lastContainer, this.props.meta, this.containerOptions);
-    }
+  componentDidUpdate() {
+    this.instantiateContainer();
   }
 
   componentWillUnmount() {