react-container-query alternatives and similar libraries
Based on the "CSS / Style" category.
Alternatively, view react-container-query alternatives based on common mentions on social networks and blogs.
-
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress π -
stitches
[Not Actively Maintained] CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience. -
aphrodite
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation -
Ultra Fast, Zero Runtime, Headless UI Components
π»ββοΈ A Headless, Utility-First, and Zero-Runtime UI Component Library β¨ -
react-look
DISCONTINUED. Advanced & Dynamic Component Styling for React and React Native. Ships with powerful Plugins, Mixins and Developer Tools. -
stilr
Encapsulated styling for your javascript components with all the power of javascript and CSS combined. -
aesthetic
π¨ Aesthetic is an end-to-end multi-platform styling framework that offers a strict design system, robust atomic CSS-in-JS engine, a structural style sheet specification (SSS), a low-runtime solution, and much more! -
paperclip
DISCONTINUED. Write durable HTML & CSS for any kind of web application [Moved to: https://github.com/paperclip-ui/paperclip]
Civic Auth - Auth in Less Than 5 Minutes

* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of react-container-query or a related project?
README
React Container Query
True modularity in styling responsive component.
Installation
npm i -D react-container-query
Disclaimer
I am providing code in this repository to you under an open source license. Because this is my personal repository, the license you receive to my code is from me and not from my employer (Facebook).
API
useContainerQuery(query, initialSize?)
Compare the hook style code with the original example from https://github.com/react-container-query/react-container-query#containerquery-queryquery-initialsizewidth-height
Hook Example 1 - Queries against a native DOM element as the container
- Native DOM element refers to
div
,span
, etc.
import React from 'react';
import { useContainerQuery } from 'react-container-query';
const query = {
'width-between-400-and-599': {
minWidth: 400,
maxWidth: 599,
},
'width-larger-than-600': {
minWidth: 600,
},
};
const MyComponent = () => {
const [params, containerRef] = useContainerQuery(query);
return <div ref={containerRef} className={classnames(params)}>the box</div>;
};
Hook Example 2 - Usage for a React component as the container - React.forwardRef
- If the container element we want to measure is a React component, and since we can't measure the size of React component itself, we can use
React.forwardRef
. - The container React component must then forward the
ref
and set it on the actual native DOM element it renders (e.g,div
,span
, etc) - as seen in th example below
import React from 'react';
import { useContainerQuery } from 'react-container-query';
const query = {
'width-between-400-and-599': {
minWidth: 400,
maxWidth: 599,
},
'width-larger-than-600': {
minWidth: 600,
},
};
const MyCustomWrapper = React.forwardRef((props, ref) => {
// MyCustomWrapper really renders a div which wraps the children.
// Setting the ref on it allows container query to measure its size.
return <div ref={ref}>{props.children}</div>
});
const MyComponent = () => {
const [params, containerRef] = useContainerQuery(query);
return <MyCustomWrapper ref={containerRef} className={classnames(params)}>the box</div>;
};
- In this example,
<MyCustomWrapper />
would forward thecontainerRef
and set it on thediv
element it is using to wrap the children.
<ContainerQuery query={query} initialSize?={{width?, height?}}>
import React, {Component} from 'react';
import {render} from 'react-dom';
import {ContainerQuery} from 'react-container-query';
import classnames from 'classnames';
const query = {
'width-between-400-and-599': {
minWidth: 400,
maxWidth: 599
},
'width-larger-than-600': {
minWidth: 600,
}
};
function MyComponent() {
/**
* `params` in the children function will look like
* {
* 'width-between-400-and-599': true,
* 'width-larger-than-600': false
* }
*/
return (
<ContainerQuery query={query}>
{(params) => (
<div className={classnames(params)}>the box</div>
)}
</ContainerQuery>
);
};
/**
* This will generate following HTML:
* <div class="width-between-400-and-599"></div>
*/
render(<MyComponent/>, document.getElementById('app'));
properties
props.children
Must be a function to return a single or an array of React elements. The function will be invoked with params
, which is a key-value pair where keys are class names, values are booleans to indicate if that class name's constraints are all satisfied.
props.query
"query" is key-value pairs where keys are the class names that will be applied to container element when all constraints are met. The values are the constraints.
props.initialSize?
(optional)
initialSize
is an object with optional width
or height
property. Because the limitation on how size is computed based on underlying element, in the initial rendering pass, we don't have the size info (because element must be in the DOM have a valid size). At this time initialSize
will be used as the size of the element.
applyContainerQuery(Component, query, initialSize?) -> ReactComponent
import React, {Component} from 'react';
import {render} from 'react-dom';
import {applyContainerQuery} from 'react-container-query';
import classnames from 'classnames';
const query = {
'width-between-400-and-599': {
minWidth: 400,
maxWidth: 599
},
'width-larger-than-600': {
minWidth: 600,
}
};
class Container extends Component {
render() {
/**
* `this.props.containerQuery` will look like
* {
* 'width-between-400-and-599': true,
* 'width-larger-than-600': false
* }
*/
return <div className={classnames(this.props.containerQuery)}>the box</div>;
}
}
const App = applyContainerQuery(Container, query)
/**
* This will generate following HTML:
* <div class="width-between-400-and-599"></div>
*/
render(<App/>, document.getElementById('app'));
This is a very similar to <ContainerQuery/>
, except it's higher order component style. You don't have to use them together.
Why
Modularity is the heart of component based UI. With most JavaScript modularized, CSS failed to catch up. When developing a responsive web page, we use media queries to toggle styles based on the size of the viewport. This creates problems when creating component level styles. The same component will behave differently when it is placed in different locations on a page. It seriously breaks the modularity of a component. We need components to be responsive and independent of viewport sizes.
What is container query
Container query is a work in process CSS feature. "Container queries allow an author to control styling based on the size of a containing element rather than the size of the userβs viewport." (from Container Query). Container Queries: Once More Unto the Breach is the inspiration of this repo.
With below CSS, .box
will be blue when .container
is wider than 600px, green when width between 400px and 599px, and red for the rest of time.
.box {
background-color: red;
}
.container:media(min-width: 400px) {
.box {
background-color: green;
}
}
.container:media(min-width: 600px) {
.box {
background-color: blue;
}
}
Note: This library does not provide these CSS features.
Demo
Checkout CodePen
- Adjustable Sidebar http://codepen.io/daiweilu/pen/wMrrZM
- Responsive Component Layout https://codepen.io/daiweilu/pen/EXWRqx
You can also check out [examples directory](./examples).
Performance
react-container-query is using element-resize-detector in mainstream browsers and ResizeObserver in cutting edge browsers. It's completely event based, so no excessive code runs if no changes on element sizes.
*Note that all licence references and agreements mentioned in the react-container-query README section above
are relevant to that project's source code only.