VinSpee/react-container-query-container

A higher-order react component enabling container queries today

React ContainerQueryContainer

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.

• Git
• Node.js (with npm)
• nwb - npm install -g nwb

Installation

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

Running / Development

• nwb serve will run the component's demo app
• Visit the demo at http://localhost:3000

Running Tests

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

Building

• nwb build