use-container-query

React hook for element-based media queries.

Install

yarn add use-container-query

Usage

import useContainerQuery from 'use-container-query';

function LandscapeOnly() {
  const ref = useRef(null);
  const isLandscape = useContainerQuery(ref, {
    type: 'orientation',
    value: 'landscape',
  });

  return (
    <div ref={ref}>
      { isLandscape
        ? 'This element is on landscape orientation'
        : 'This element is on portrait orientation'
      }
    </div>
  );
}

Supported queries

• aspect-ratio
• max-aspect-ratio
• min-aspect-ratio
• width
• max-width
• min-width
• height
• max-height
• min-height
• orientation
  • value must be either 'portrait' or 'landscape'

License

MIT © lxsmnsyc