Skip to content

VinSpee/react-container-query-container

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
es6
 
 
lib
 
 
src
 
 
umd
 
 
 
 
 
 
 
 
 
 

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