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

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

Set up PostCSS with webpack

Here is a documentation 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.

`<ContainerQuery>`

A render-prop approach.

import React, { Component } from "react";
import { ContainerQuery } from "@zeecoder/react-container-query";
import { meta } from "./App.pcss";

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 React, { Component } from "react";
import { ContainerQuery } from "@zeecoder/react-container-query";
import { meta } from "./App.pcss";

const App = () => (
  <ContainerQuery meta={meta}>
    {size => (
      <div className="App">
        My size is: {size.width}x{size.height}
      </div>
    )}
  </ContainerQuery>
);

export default App;

As you can see the ContainerQuery component automatically picks up the child element as the Container.

To do this, the component internally calls ReactDOM.findDOMNode(this). If you want to avoid that, you can also pass in the element prop:

import React, { Component } from "react";
import { ContainerQuery } from "@zeecoder/react-container-query";
import { meta } from "./App.pcss";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      element: null
    };

    this.ref = React.createRef();
  }

  updateElementFromRef() {
    if (this.state.element !== this.ref.current) {
      this.setState({ element: this.ref.current });
    }
  }

  componentDidMount() {
    this.updateElementFromRef();
  }

  componentDidUpdate() {
    this.updateElementFromRef();
  }

  render() {
    return (
      <ContainerQuery meta={meta} element={this.state.element}>
        <div className="App" ref={this.ref}>
          My App
        </div>
      </ContainerQuery>
    );
  }
}

export default App;

`withContainerQuery`

If you prefer Higher-Order Components:

import { withContainerQuery } from "@zeecoder/react-container-query";
import { meta } from "./App.pcss";

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

export default withContainerQuery(App, meta);

License

MIT