Nanananananananana.. Pat Man!

    use-container-query
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.0 • Public • Published

    use-container-query

    React hook for element-based media queries.

    NPM JavaScript Style GuideOpen in CodeSandbox

    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

    Install

    npm i use-container-query

    DownloadsWeekly Downloads

    10

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    69.1 kB

    Total Files

    26

    Last publish

    Collaborators

    • lxsmnsyc