@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

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 stats 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 stats from "./App.pcss.json";

const App = () => <div className="App">My App</div>;

export default withContainerQuery(App, stats);

<ContainerQuery>

A render-prop approach.

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

const App = () => (
  <ContainerQuery stats={stats}>
    <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 stats from "./App.pcss.json";

const App = () => (
  <ContainerQuery stats={stats}>
    {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