Package Exports

@zeecoder/react-container-query

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@zeecoder/react-container-query) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-container-query

This module is part of a monorepo.

Detailed documentation can be found there.

Install

npm install --save @zeecoder/react-container-query

yarn add @zeecoder/react-container-query

Usage

`<ResizeObserver>`

This component simply observes a root element's size changes.

Useful to allow for rendering parts of the component conditionally, based on its size.

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

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

const App = () => (
  <ResizeObserver
    render={size => (
      // size can be "null" when size is still not available
      <div>My size is: {size ? `${size.width}x${size.height}` : "?"}</div>
    )}
  />
);

export default App;

`<ContainerQuery>`

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.

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}
    render={size => (
      <div className="App">
        My size is: {size ? `${size.width}x${size.height}` : "?"}
      </div>
    )}
  />
);

export default App;

`withContainerQueryCSS`

Similar to the one above, just using the Higher-Order Component pattern.

Note that size is not available to it however, and simply used to manage the container query.

import { withContainerQueryCSS } 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">Styled app</div>;

export default withContainerQueryCSS(App, stats);

License

MIT