A higher-order react component enabling container queries today
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
es6
lib
src
umd
.gitignore
LICENSE
README.md
nwb.config.js
package.json

README.md

React ContainerQueryContainer

npm package

Usage

  1. npm i -D react-container-query-container
  2. initialize the container queries prolyfill once in the top of your app. (set postcss: true if you're using the postcss-plugin):
    import ContainerQueryContainer, { cq } from 'react-container-query-container';
    const cqAPI = cq({ postcss: true });
    
  3. decorate your component with the higher-order component, passing an optional callback to execute when the component is reevaluated:
    @ContainerQueryContainer({
    	cqAPI,
    	componentShouldReevaluate: () => console.log('reevaluated.'),
    })
    class DemoComponent extends Component { …
    

Welcome to the future!

Collaborating on this React component:

Prerequisites

You will need the following things properly installed on your computer.

Installation

  • git clone https://github.com/VinSpee/react-container-query-container.git this repository
  • change into the new directory
  • npm install

Running / Development

Running Tests

  • nwb test will run the tests once
  • nwb test --server will run the tests on every change

Building

  • nwb build