@zeecoder/react-container-query

react-container-query

This module is part of a monorepo.

Detailed documentation can be found there.

Install

yarn add @zeecoder/react-container-query
# or
npm install --save @zeecoder/react-container-query

Set up PostCSS with webpack

Here is a documentiation on how to do just that, in order to get the same syntax I've been using.

Usage

Assuming the following CSS:

.App {
  background: red;
  font-size: 20px;
  color: white;
  padding: 10px;
  border: none;

  @container (width > 900px) {
    background: green;
  }
}

And assuming that meta is the object obtained by running the above CSS through the postcss plugin.

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.)

withContainerQuery

This is probably the easiest way of enabling container queries.

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.

import { ContainerQuery } from "@zeecoder/react-container-query";
// Assuming postcss-loader to be set up
import "./App.pcss";
import meta from "./App.pcss.json";

const App = () => (
  <ContainerQuery meta={meta}>
    <div className="App">My App</div>
  </ContainerQuery>
);

export default App;

If you're also interested in the component's size:

import { ContainerQuery } from "@zeecoder/react-container-query";
// Assuming postcss-loader to be set up
import "./App.pcss";
import meta from "./App.pcss.json";

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}` : "?"}
      </div>
    )}
  </ContainerQuery>
);

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.

(It uses a polyfill, if a native implementation is not available.)

import { ResizeObserver } from "@zeecoder/react-container-query";

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>
);

export default App;

License

MIT