Contained React is a library that mimics the logic of [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) for React.
npm install contained-reactContained React is a library that mimics the logic of Container Queries for React.
This library serves as a placeholder until we get matchContainer support for HTMLElements, and this will be updated to support that natively.
- See CSSWG Draft for matchContainer.: https://github.com/w3c/csswg-drafts/issues/6205
``tsx
import { useContainerQuery } from 'contained-react';
export function ContainerQuery() {
const [ref, matches] = useContainerQuery('min-width: 700px');
// matches will be true if the container is at least 700px wide
return
$3
#### Only width
tsx
import { useContainerQueries } from 'contained-react';export function ContainerQueries() {
const [ref, matches] = useContainerQueries({
sm: 'min-width: 550px',
md: 'min-width: 768px',
});
return (
{matches.width === 'sm' && Small size}
{matches.width === 'md' && Medium size}
);
}
`#### Width and height
tsx
import { useContainerQueries } from 'contained-react';export function ContainerQueries() {
const [ref, matches] = useContainerQueries({
widthSm: 'min-width: 550px',
widthMd: 'min-width: 768px',
heightSm: 'min-height: 300px',
});
return (
{matches.width === 'widthSm' && matches.height === 'heightSm' && Width and height both small size}
{matches.width === 'widthMd' && Medium size}
);
}
``