useContainerQuery react hook

Author: ZeeCoder

CHANGELOG.md

@@ -5,6 +5,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [3.2.0]
+
+### Added
+
+- `container-query`
+  - `handleResize` is no longer called with null, and width / height props are
+    always set.
+- `use-container-query`
+  - New `useContainerQuery` react hook. (Requires 16.8.0 or higher.)
+- `react-container-query`
+  - Relaxed the react and react-dom peer dep version ranges.
+
 ## [3.1.0]
 
 ### Added

docs/react.md

@@ -42,6 +42,52 @@ You might have the following CSS:
 }
 ```
 
+### useContainerQuery hook
+
+This is probably the easiest way to use Container Queries up in React.
+
+Note that to use [React hooks](https://reactjs.org/docs/hooks-intro.html), you'll
+need React 16.8.0 or higher.
+
+```js
+import React from "react";
+import useContainerQuery from "@zeecoder/use-container-query";
+import { meta } from "./App.pcss";
+
+const App = () => {
+  const ref = useContainerQuery(meta);
+
+  return (
+    <div className="App" ref={ref}>
+      My App
+    </div>
+  );
+};
+
+export default App;
+```
+
+To get the component's size, you can do the following:
+
+```js
+import React, { useState } from "react";
+import useContainerQuery from "@zeecoder/use-container-query";
+import { meta } from "./App.pcss";
+
+const App = () => {
+  const [size, handleResize] = useState({ width: 1, height: 1 });
+  const ref = useContainerQuery(meta, { handleResize });
+
+  return (
+    <div className="App" ref={ref}>
+      My App {size.width}x{size.height}
+    </div>
+  );
+};
+
+export default App;
+```
+
 ### \<ContainerQuery\> with (children) Render Prop
 
 Using render props.

package.json

@@ -41,8 +41,8 @@
     "postcss-nested": "^4.1.1",
     "prettier": "^1.15.2",
     "prop-types": "^15.6.2",
-    "react": "^16.6.3",
-    "react-dom": "^16.6.3",
+    "react": "^16.8.1",
+    "react-dom": "^16.8.1",
     "regenerator-runtime": "^0.13.1",
     "style-loader": "^0.23.1",
     "webpack": "^4.28.2",

packages/react-container-query/README.md

@@ -1,4 +1,4 @@
-# react-container-query
+# @zeecoder/react-container-query
 
 This module is part of a [monorepo](https://github.com/ZeeCoder/container-query).
 

packages/react-container-query/package.json

@@ -39,8 +39,8 @@
     "size-limit": "^0.21.0"
   },
   "peerDependencies": {
-    "react": "^15.0.0 || ^16.0.0",
-    "react-dom": "^15.0.0 || ^16.0.0"
+    "react": ">=15.0.0",
+    "react-dom": ">=15.0.0"
   },
   "keywords": [
     "react",

packages/use-container-query/.babelrc

@@ -0,0 +1,19 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "targets": {
+          "browsers": [
+            "IE >= 10",
+            "Chrome >= 10",
+            "Opera >= 15",
+            "FF >= 10",
+            "Edge >= 12"
+          ]
+        }
+      }
+    ]
+  ]
+}

packages/use-container-query/.npmignore

@@ -0,0 +1,6 @@
+src/
+rollup/
+.babelrc
+yarn.lock
+yarn-error.log
+.size-limit

packages/use-container-query/.size-limit

@@ -0,0 +1,10 @@
+[
+  {
+    path: "dist/bundle.cjs.js",
+    limit: "15.1KB"
+  },
+  {
+    path: "dist/bundle.esm.js",
+    limit: "15.1KB"
+  }
+]

packages/use-container-query/LICENSE

@@ -0,0 +1,19 @@
+The MIT License (MIT)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

packages/use-container-query/README.md

@@ -0,0 +1,9 @@
+# @zeecoder/use-container-query
+
+This module is part of a [monorepo](https://github.com/ZeeCoder/container-query).
+
+Detailed documentation can be found [here](https://github.com/ZeeCoder/container-query/blob/master/docs/react.md).
+
+## License
+
+MIT

packages/use-container-query/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@zeecoder/use-container-query",
+  "description": "React hook to use Container Queries.",
+  "homepage": "https://github.com/ZeeCoder/container-query/tree/master/packages/use-container-query",
+  "version": "3.0.1",
+  "license": "MIT",
+  "author": "Viktor Hubert <rpgmorpheus@gmail.com>",
+  "main": "dist/bundle.cjs.js",
+  "module": "dist/bundle.esm.js",
+  "scripts": {
+    "test": "yarn size",
+    "build:esm": "rollup -c rollup/rollup.esm.js",
+    "build:cjs": "rollup -c rollup/rollup.cjs.js",
+    "build": "npm-run-all build:*",
+    "size": "size-limit",
+    "size:why": "size-limit --why",
+    "prepare": "yarn build",
+    "prepublishOnly": "yarn test"
+  },
+  "dependencies": {
+    "@zeecoder/container-query": "^3.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.1.6",
+    "@babel/preset-env": "^7.1.6",
+    "npm-run-all": "^4.1.2",
+    "rollup": "^0.67.3",
+    "rollup-plugin-babel": "^4.0.3",
+    "rollup-plugin-terser": "^3.0.0",
+    "size-limit": "^0.21.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "keywords": [
+    "react",
+    "hooks",
+    "rwd",
+    "responsive-design",
+    "responsive",
+    "postcss",
+    "postcss-plugin",
+    "container-query",
+    "container-queries",
+    "element-query",
+    "element-queries",
+    "media-query",
+    "media-queries",
+    "css",
+    "browser",
+    "query",
+    "javascript",
+    "component",
+    "module"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/use-container-query/rollup/rollup.cjs.js

@@ -0,0 +1,13 @@
+import sharedConfig from "./rollup.shared";
+
+sharedConfig.output = [
+  {
+    // Muting the warning about CJS default export being added to the ".default"
+    // prop. It's fine.
+    exports: "named",
+    file: __dirname + "/../dist/bundle.cjs.js",
+    format: "cjs"
+  }
+];
+
+export default sharedConfig;

packages/use-container-query/rollup/rollup.esm.js

@@ -0,0 +1,10 @@
+import sharedConfig from "./rollup.shared";
+
+sharedConfig.output = [
+  {
+    file: __dirname + "/../dist/bundle.esm.js",
+    format: "es"
+  }
+];
+
+export default sharedConfig;

packages/use-container-query/rollup/rollup.shared.js

@@ -0,0 +1,8 @@
+import babel from "rollup-plugin-babel";
+import { terser } from "rollup-plugin-terser";
+
+export default {
+  input: __dirname + "/../src/index.js",
+  plugins: [babel(), terser()],
+  external: ["react", "react-dom", "@zeecoder/container-query"]
+};

packages/use-container-query/src/index.js

@@ -0,0 +1,12 @@
+import React, { useRef, useEffect } from "react";
+import Container from "@zeecoder/container-query";
+
+export default function(meta, options = {}) {
+  const ref = useRef();
+
+  useEffect(() => {
+    new Container(ref.current, meta, options);
+  }, []);
+
+  return ref;
+}

tests/index.js

@@ -16,6 +16,6 @@ import "babel-regenerator-runtime";
 // "Registering" test suits
 import "./react/manual";
 import "./react/hoc";
+import "./react/hook";
 import "./react/non-oocss";
-// Weirdly unless basic tests are the last, they throw errors in IE
-import "./react/basic";
+import "./react/basic"; // Weirdly unless basic tests are the last, they throw errors in IE

tests/react/hook/Test/Test.js

@@ -0,0 +1,22 @@
+import React, { useState } from "react";
+import useContainerQuery from "../../../../packages/use-container-query/dist/bundle.esm";
+import { meta } from "./Test.pcss";
+
+const Test = () => {
+  const [size, handleResize] = useState({ width: 1, height: 1 });
+  const ref = useContainerQuery(meta, {
+    valuePrecision: 2,
+    // todo make handleResize always return an object with some width / height
+    //      value
+    handleResize
+  });
+
+  // todo test getting the size here
+  return (
+    <div className="Test" ref={ref}>
+      {size.width}x{size.height}
+    </div>
+  );
+};
+
+export default Test;

tests/react/hook/Test/Test.pcss

@@ -0,0 +1,16 @@
+body {
+  background: rgb(200, 200, 200);
+}
+
+.Test {
+  @define-container;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: rgb(255, 0, 0);
+  --w: 1rw;
+
+  @container (width > 100px) {
+    background-color: rgb(0, 255, 0);
+  }
+}

tests/react/hook/index.js

@@ -0,0 +1,49 @@
+import React from "react";
+import Test from "./Test/Test";
+import {
+  renderTestComponent,
+  clearDOM,
+  waitForTestComponentToHaveStyle,
+  changeRootSize,
+  waitForTestComponentToHaveCustomProperties,
+  waitForElementToHaveStyle
+} from "../../utils";
+
+// Features covered:
+// Running the same tests as we do for the HoC version
+describe("useContainerQuery", () => {
+  beforeAll(() => {
+    clearDOM();
+    renderTestComponent(<Test />, {
+      width: 100,
+      height: 50
+    });
+  });
+
+  it("should apply styles to the body", async () => {
+    await waitForElementToHaveStyle(document.body, {
+      backgroundColor: "rgb(200, 200, 200)"
+    });
+  });
+
+  it("should not have any of the container queries applied", async () => {
+    await waitForTestComponentToHaveStyle({
+      backgroundColor: "rgb(255, 0, 0)"
+    });
+
+    await waitForTestComponentToHaveCustomProperties({
+      "--w": "1px"
+    });
+  });
+
+  it("should react to width change", async () => {
+    changeRootSize({ width: 101 });
+    await waitForTestComponentToHaveStyle({
+      backgroundColor: "rgb(0, 255, 0)"
+    });
+
+    await waitForTestComponentToHaveCustomProperties({
+      "--w": "1.01px"
+    });
+  });
+});