diff --git a/CHANGELOG.md b/CHANGELOG.md index 32d60b5..2f4db53 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/docs/react.md b/docs/react.md index db4830a..18b26ff 100644 --- a/docs/react.md +++ b/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 ( +
+ My App +
+ ); +}; + +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 ( +
+ My App {size.width}x{size.height} +
+ ); +}; + +export default App; +``` + ### \ with (children) Render Prop Using render props. diff --git a/package.json b/package.json index bbbdcf9..0946da1 100644 --- a/package.json +++ b/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", diff --git a/packages/react-container-query/README.md b/packages/react-container-query/README.md index 80d177c..2d9b2c2 100644 --- a/packages/react-container-query/README.md +++ b/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). diff --git a/packages/react-container-query/package.json b/packages/react-container-query/package.json index c73119a..54a6629 100644 --- a/packages/react-container-query/package.json +++ b/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", diff --git a/packages/use-container-query/.babelrc b/packages/use-container-query/.babelrc new file mode 100644 index 0000000..7e9461d --- /dev/null +++ b/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" + ] + } + } + ] + ] +} diff --git a/packages/use-container-query/.npmignore b/packages/use-container-query/.npmignore new file mode 100644 index 0000000..880d83e --- /dev/null +++ b/packages/use-container-query/.npmignore @@ -0,0 +1,6 @@ +src/ +rollup/ +.babelrc +yarn.lock +yarn-error.log +.size-limit diff --git a/packages/use-container-query/.size-limit b/packages/use-container-query/.size-limit new file mode 100644 index 0000000..8ffbd28 --- /dev/null +++ b/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" + } +] diff --git a/packages/use-container-query/LICENSE b/packages/use-container-query/LICENSE new file mode 100644 index 0000000..72dc60d --- /dev/null +++ b/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. diff --git a/packages/use-container-query/README.md b/packages/use-container-query/README.md new file mode 100644 index 0000000..eab1e71 --- /dev/null +++ b/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 diff --git a/packages/use-container-query/package.json b/packages/use-container-query/package.json new file mode 100644 index 0000000..da9405f --- /dev/null +++ b/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 ", + "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" + } +} diff --git a/packages/use-container-query/rollup/rollup.cjs.js b/packages/use-container-query/rollup/rollup.cjs.js new file mode 100644 index 0000000..b2c1827 --- /dev/null +++ b/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; diff --git a/packages/use-container-query/rollup/rollup.esm.js b/packages/use-container-query/rollup/rollup.esm.js new file mode 100644 index 0000000..20b5331 --- /dev/null +++ b/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; diff --git a/packages/use-container-query/rollup/rollup.shared.js b/packages/use-container-query/rollup/rollup.shared.js new file mode 100644 index 0000000..76987dd --- /dev/null +++ b/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"] +}; diff --git a/packages/use-container-query/src/index.js b/packages/use-container-query/src/index.js new file mode 100644 index 0000000..3098504 --- /dev/null +++ b/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; +} diff --git a/tests/index.js b/tests/index.js index 4591468..2580f95 100644 --- a/tests/index.js +++ b/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 diff --git a/tests/react/hook/Test/Test.js b/tests/react/hook/Test/Test.js new file mode 100644 index 0000000..46ced56 --- /dev/null +++ b/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 ( +
+ {size.width}x{size.height} +
+ ); +}; + +export default Test; diff --git a/tests/react/hook/Test/Test.pcss b/tests/react/hook/Test/Test.pcss new file mode 100644 index 0000000..787b134 --- /dev/null +++ b/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); + } +} diff --git a/tests/react/hook/index.js b/tests/react/hook/index.js new file mode 100644 index 0000000..6d71a9e --- /dev/null +++ b/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(, { + 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" + }); + }); +}); diff --git a/yarn.lock b/yarn.lock index 3cdfbcb..92b7e68 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7610,25 +7610,25 @@ rc@^1.2.7: minimist "^1.2.0" strip-json-comments "~2.0.1" -react-dom@^16.6.3: - version "16.6.3" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.6.3.tgz#8fa7ba6883c85211b8da2d0efeffc9d3825cccc0" - integrity sha512-8ugJWRCWLGXy+7PmNh8WJz3g1TaTUt1XyoIcFN+x0Zbkoz+KKdUyx1AQLYJdbFXjuF41Nmjn5+j//rxvhFjgSQ== +react-dom@^16.8.1: + version "16.8.1" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.1.tgz#ec860f98853d09d39bafd3a6f1e12389d283dbb4" + integrity sha512-N74IZUrPt6UiDjXaO7UbDDFXeUXnVhZzeRLy/6iqqN1ipfjrhR60Bp5NuBK+rv3GMdqdIuwIl22u1SYwf330bg== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" prop-types "^15.6.2" - scheduler "^0.11.2" + scheduler "^0.13.1" -react@^16.6.3: - version "16.6.3" - resolved "https://registry.yarnpkg.com/react/-/react-16.6.3.tgz#25d77c91911d6bbdd23db41e70fb094cc1e0871c" - integrity sha512-zCvmH2vbEolgKxtqXL2wmGCUxUyNheYn/C+PD1YAjfxHC54+MhdruyhO7QieQrYsYeTxrn93PM2y0jRH1zEExw== +react@^16.8.1: + version "16.8.1" + resolved "https://registry.yarnpkg.com/react/-/react-16.8.1.tgz#ae11831f6cb2a05d58603a976afc8a558e852c4a" + integrity sha512-wLw5CFGPdo7p/AgteFz7GblI2JPOos0+biSoxf1FPsGxWQZdN/pj6oToJs1crn61DL3Ln7mN86uZ4j74p31ELQ== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" prop-types "^15.6.2" - scheduler "^0.11.2" + scheduler "^0.13.1" read-cmd-shim@^1.0.1: version "1.0.1" @@ -8107,10 +8107,10 @@ sax@^1.2.4: resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw== -scheduler@^0.11.2: - version "0.11.3" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.11.3.tgz#b5769b90cf8b1464f3f3cfcafe8e3cd7555a2d6b" - integrity sha512-i9X9VRRVZDd3xZw10NY5Z2cVMbdYg6gqFecfj79USv1CFN+YrJ3gIPRKf1qlY+Sxly4djoKdfx1T+m9dnRB8kQ== +scheduler@^0.13.1: + version "0.13.1" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.1.tgz#1a217df1bfaabaf4f1b92a9127d5d732d85a9591" + integrity sha512-VJKOkiKIN2/6NOoexuypwSrybx13MY7NSy9RNt8wPvZDMRT1CW6qlpF5jXRToXNHz3uWzbm2elNpZfXfGPqP9A== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1"