React hook for element-based media queries
MIT License
React hook for element-based media queries.
yarn add use-container-query
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>
);
}
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'
MIT © lxsmnsyc