Skip to content

Commit cf2a40f

Browse files
ZeeCoderZeeCoder
committed
ContainerQuery and ResizeObserver components
1 parent 04e5f38 commit cf2a40f

File tree

16 files changed

+390
-78
lines changed

16 files changed

+390
-78
lines changed

‎CHANGELOG.md

+8
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
77

88
## [Unreleased]
99

10+
## [2.4.0]
11+
12+
### Added
13+
14+
* `react-container-query`
15+
* New `ContainerQuery` and `ResizeObserver` components
16+
17+
1018
## [2.3.1]
1119

1220
### Fixed

‎packages/container-query/LICENSE

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

‎packages/container-query/README.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# container-query
2+
3+
This module is part of a [monorepo](https://github.com/ZeeCoder/container-query).
4+
5+
Detailed documentation can be found there.

‎packages/container-query/src/Container.js

+11-7
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const mutationObserver = new MutationObserver(mutationRecords => {
5454
});
5555

5656
export default class Container {
57-
containerElement: HTMLElement;
57+
container: HTMLElement;
5858
processedJsonStats: {};
5959
opts: {};
6060

@@ -63,7 +63,7 @@ export default class Container {
6363
jsonStats: QueryStats,
6464
opts: {} = {}
6565
) {
66-
this.containerElement = containerElement;
66+
this.container = containerElement;
6767
this.processedJsonStats = processConfig(jsonStats);
6868

6969
this.opts = objectAssign(
@@ -89,7 +89,7 @@ export default class Container {
8989
queryState: getInitialQueryState()
9090
});
9191

92-
mutationObserver.observe(this.containerElement.parentNode, {
92+
mutationObserver.observe(this.container.parentNode, {
9393
childList: true
9494
});
9595

@@ -106,20 +106,24 @@ export default class Container {
106106
* Starts observing resize changes.
107107
*/
108108
observeResize() {
109-
resizeObserver.observe(this.containerElement);
109+
resizeObserver.observe(this.container);
110110
}
111111

112112
/**
113113
* Stops observing resize changes.
114114
*/
115115
unobserveResize() {
116-
resizeObserver.unobserve(this.containerElement);
116+
resizeObserver.unobserve(this.container);
117117
}
118118

119119
/**
120120
* Adjusts the container to it's current dimensions, or to the ones given.
121121
*/
122-
adjust(containerSize: ?ContainerSize = null) {
123-
adjustContainer(this.containerElement, containerSize);
122+
adjust(size: ?ContainerSize = null) {
123+
adjustContainer(this.container, size);
124+
125+
if (typeof this.opts.handleResize === "function") {
126+
this.opts.handleResize(size);
127+
}
124128
}
125129
}

‎packages/postcss-container-query/LICENSE

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

‎packages/postcss-container-query/README.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# postcss-container-query
2+
3+
This module is part of a [monorepo](https://github.com/ZeeCoder/container-query).
4+
5+
Detailed documentation can be found there.

‎packages/react-container-query/.size-limit

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
[
22
{
33
path: "dist/bundle.cjs.js",
4-
limit: "15KB"
4+
limit: "20KB"
55
},
66
{
77
path: "dist/bundle.esm.js",
8-
limit: "15KB"
8+
limit: "20KB"
99
}
1010
]

‎packages/react-container-query/LICENSE

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

‎packages/react-container-query/README.md

+106
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
# react-container-query
2+
3+
This module is part of a [monorepo](https://github.com/ZeeCoder/container-query).
4+
5+
Detailed documentation can be found there.
6+
7+
## Install
8+
9+
```
10+
npm install --save @zeecoder/react-container-query
11+
```
12+
13+
or
14+
15+
```
16+
yarn add @zeecoder/react-container-query
17+
```
18+
19+
## Usage
20+
21+
### `<ResizeObserver>`
22+
23+
This component simply observes a root element's size changes.
24+
25+
Useful to allow for rendering parts of the component conditionally, based
26+
on its size.
27+
28+
(Uses a [polyfill](https://github.com/que-etc/resize-observer-polyfill), if a native implementation is not available.)
29+
30+
```js
31+
import { ResizeObserver } from "@zeecoder/react-container-query";
32+
33+
const App = () => (
34+
<ResizeObserver
35+
render={size => (
36+
// size can be "null" when size is still not available
37+
<div>My size is: {size ? `${size.width}x${size.height}` : "?"}</div>
38+
)}
39+
/>
40+
);
41+
42+
export default App;
43+
```
44+
45+
### `<ContainerQuery>`
46+
47+
Assuming the following CSS:
48+
49+
```pcss
50+
.App {
51+
background: red;
52+
font-size: 20px;
53+
color: white;
54+
padding: 10px;
55+
border: none;
56+
57+
@container (width > 900px) {
58+
background: green;
59+
}
60+
}
61+
```
62+
63+
And assuming that `stats` is the object obtained by running the above CSS
64+
through the [postcss plugin](https://github.com/ZeeCoder/container-query/tree/master/packages/postcss-container-query).
65+
66+
```js
67+
import { ContainerQuery } from "@zeecoder/react-container-query";
68+
// Assuming postcss-loader to be set up
69+
import "./App.pcss";
70+
import stats from "./App.pcss.json";
71+
72+
const App = () => (
73+
<ContainerQuery
74+
stats={stats}
75+
render={size => (
76+
<div className="App">
77+
My size is: {size ? `${size.width}x${size.height}` : "?"}
78+
</div>
79+
)}
80+
/>
81+
);
82+
83+
export default App;
84+
```
85+
86+
### `withContainerQueryCSS`
87+
88+
Similar to the one above, just using the Higher-Order Component pattern.
89+
90+
Note that size is not available to it however, and simply used to manage the
91+
container query.
92+
93+
```js
94+
import { withContainerQueryCSS } from "@zeecoder/react-container-query";
95+
// Assuming postcss-loader to be set up
96+
import "./App.pcss";
97+
import stats from "./App.pcss.json";
98+
99+
const App = () => <div className="App">Styled app</div>;
100+
101+
export default withContainerQueryCSS(App, stats);
102+
```
103+
104+
## License
105+
106+
MIT

‎packages/react-container-query/package.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,11 @@
1515
"prepublish": "yarn build"
1616
},
1717
"dependencies": {
18-
"@zeecoder/container-query": "^2.3.1"
18+
"@zeecoder/container-query": "^2.3.1",
19+
"resize-observer-polyfill": "^1.5.0",
20+
"prop-types": "^15.6.0",
21+
"es6-weak-map": "^2.0.2",
22+
"object-assign": "^4.1.1"
1923
},
2024
"devDependencies": {
2125
"babel-plugin-external-helpers": "^6.22.0",

‎packages/react-container-query/rollup/rollup.shared.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ export default {
77
"react",
88
"react-dom",
99
"@zeecoder/container-query",
10-
"hoist-non-react-statics"
10+
"prop-types",
11+
"object-assign",
12+
"es6-weak-map",
13+
"resize-observer-polyfill"
1114
]
1215
};

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

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import React, { Component } from "react";
2+
import ReactDOM from "react-dom";
3+
import PropTypes from "prop-types";
4+
import Container from "@zeecoder/container-query";
5+
import objectAssign from "object-assign";
6+
7+
export default class ContainerQuery extends Component {
8+
constructor(props) {
9+
super(props);
10+
11+
this.state = { size: null };
12+
13+
this.handleResize = this.handleResize.bind(this);
14+
15+
this.containerOptions = objectAssign({}, this.props.options, {
16+
handleResize: this.handleResize
17+
});
18+
}
19+
20+
handleResize(size) {
21+
this.setState({ size });
22+
}
23+
24+
componentDidMount() {
25+
if (!this.props.stats) {
26+
return;
27+
}
28+
29+
this.lastContainer = ReactDOM.findDOMNode(this);
30+
new Container(this.lastContainer, this.props.stats, this.containerOptions);
31+
}
32+
33+
componentDidUpdate() {
34+
if (!this.props.stats) {
35+
return;
36+
}
37+
38+
const element = ReactDOM.findDOMNode(this);
39+
if (this.lastContainer !== element) {
40+
this.lastContainer = element;
41+
new Container(
42+
this.lastContainer,
43+
this.props.stats,
44+
this.containerOptions
45+
);
46+
}
47+
}
48+
49+
render() {
50+
return this.props.render(this.state.size);
51+
}
52+
}
53+
54+
ContainerQuery.defaultProps = {
55+
stats: {},
56+
options: {}
57+
};
58+
59+
ContainerQuery.propTypes = {
60+
render: PropTypes.func,
61+
stats: PropTypes.object,
62+
options: PropTypes.object
63+
};

0 commit comments

Comments
 (0)