Contained React

Contained 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

Usage

Container Query

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 <div ref={ref}>{matches ? 'MATCH' : 'DOES NOT MATCH'}</div>;
}

Container Queries

Only width

import { useContainerQueries } from 'contained-react';

export function ContainerQueries() {
  const [ref, matches] = useContainerQueries({
    sm: 'min-width: 550px',
    md: 'min-width: 768px',
  });

  return (
    <div ref={ref}>
      {matches.width === 'sm' && <div>Small size</div>}
      {matches.width === 'md' && <div>Medium size</div>}
    </div>
  );
}

Width and height

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 (
    <div ref={ref}>
      {matches.width === 'widthSm' && matches.height === 'heightSm' && <div>Width and height both small size</div>}
      {matches.width === 'widthMd' && <div>Medium size</div>}
    </div>
  );
}

See NPM stats

https://bundlephobia.com/package/contained-react