Build modular responsive components with React Container Query

There are two important concepts in web design and development, “component” and “responsive”. Component means we create basic group of elements and reuse it so it’s easy to design and maintain. Responsive means our component should look good and accessible on both mobile and desktop devices.

One conflict exists between the two concepts though. Component should be self contained, but responsiveness relies on global viewport sizes, i.e. media query. This conflict makes us to create media query break points with arbitrary values only because our component is placed at different places on the page. What if our component can be responsive based on the size of itself rather than viewport? That’s what container query specs is aiming to solve.

With container query, we can target our CSS on different sizes of a container element. This way our component no longer relies on global viewport. It can be self contained again. Unfortunately no browser has implemented support for it yet. That’s why I have created React Container Query to have a taste of it within React.js.

React Container Query can be used for creating responsive UIs for mobile and desktop. It also makes the process of creating resizable UIs more enjoyable. You can checkout github page for details, and this short article with a detailed example and other resources. Here are some other examples:

See the Pen Adjustable Sidebar by Daiwei Lu (@daiweilu) on CodePen.

See the Pen Responsive Layout by Daiwei Lu (@daiweilu) on CodePen.