ContainerQuery component update to always return the size object

Author: ZeeCoder

CHANGELOG.md

@@ -18,6 +18,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - Removed the default export. (Both ContainerQuery and withContainerQuery is
     still available as named exports.)
   - Removed the `stats` prop from ContainerQuery. (Use `meta` instead.)
+  - `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.
 
 ## [3.0.0-alpha.1]
 

packages/react-container-query/README.md

@@ -15,7 +15,7 @@ npm install --save @zeecoder/react-container-query
 ### Set up PostCSS with webpack
 
 [Here](https://github.com/ZeeCoder/container-query/blob/master/docs/postcss.md)
-is a documentiation on how to do just that, in order to get the same syntax I've
+is a documentation on how to do just that, in order to get the same syntax I've
 been using.
 
 ## Usage
@@ -39,35 +39,13 @@ Assuming the following CSS:
 And assuming that `meta` is the object obtained by running the above CSS
 through the [postcss plugin](https://github.com/ZeeCoder/container-query/tree/master/packages/postcss-container-query).
 
-The one thing you need to keep in mind is that the container css class
-(".App" in this case) has to be present on the root element.
-
-(A limitation [soon to be addressed](https://github.com/ZeeCoder/container-query/issues/89).)
-
-### `withContainerQuery`
-
-This is probably the easiest way of enabling container queries.
-
-```js
-import { withContainerQuery } from "@zeecoder/react-container-query";
-// Assuming postcss-loader to be set up
-import "./App.pcss";
-import meta from "./App.pcss.json";
-
-const App = () => <div className="App">My App</div>;
-
-export default withContainerQuery(App, meta);
-```
-
 ### `<ContainerQuery>`
 
 A render-prop approach.
 
 ```js
 import { ContainerQuery } from "@zeecoder/react-container-query";
-// Assuming postcss-loader to be set up
-import "./App.pcss";
-import meta from "./App.pcss.json";
+import { meta } from "./App.pcss";
 
 const App = () => (
   <ContainerQuery meta={meta}>
@@ -82,16 +60,13 @@ If you're also interested in the component's size:
 
 ```js
 import { ContainerQuery } from "@zeecoder/react-container-query";
-// Assuming postcss-loader to be set up
-import "./App.pcss";
-import meta from "./App.pcss.json";
+import { meta } from "./App.pcss";
 
 const App = () => (
   <ContainerQuery meta={meta}>
     {size => (
-      // size can be "null" when size is still not available
       <div className="App">
-        My size is: {size ? `${size.width}x${size.height}` : "?"}
+        My size is: {size.width}x{size.height}
       </div>
     )}
   </ContainerQuery>
@@ -100,28 +75,17 @@ const App = () => (
 export default App;
 ```
 
-### `<ResizeObserver>`
-
-This component simply observes an element's size changes using `ResizeObserver`.
-
-Useful to allow for rendering parts of the component conditionally, based
-on its size.
+### `withContainerQuery`
 
-(It uses a [polyfill](https://github.com/que-etc/resize-observer-polyfill), if a native implementation is not available.)
+If you prefer Higher-Order Components:
 
 ```js
-import { ResizeObserver } from "@zeecoder/react-container-query";
+import { withContainerQuery } from "@zeecoder/react-container-query";
+import { meta } from "./App.pcss";
 
-const App = () => (
-  <ResizeObserver>
-    {size => (
-      // size can be "null" when size is still not available
-      <div>My size is: {size ? `${size.width}x${size.height}` : "?"}</div>
-    )}
-  </ResizeObserver>
-);
+const App = () => <div className="App">My App</div>;
 
-export default App;
+export default withContainerQuery(App, meta);
 ```
 
 ## License

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

@@ -7,7 +7,7 @@ export default class ContainerQuery extends Component {
   constructor(props) {
     super(props);
 
-    this.state = { size: null };
+    this.state = { width: 0, height: 0 };
 
     this.containerOptions = { ...this.props.options };