https://github.com/lxsmnsyc/use-container-query

React hook for element-based media queries
https://github.com/lxsmnsyc/use-container-query

Last synced: about 2 months ago
JSON representation

React hook for element-based media queries

• Host: GitHub
• URL: https://github.com/lxsmnsyc/use-container-query
• Owner: lxsmnsyc
• License: mit
• Created: 2020-10-25T15:52:43.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2021-03-20T07:26:44.000Z (about 4 years ago)
• Last Synced: 2024-05-02T05:19:36.878Z (about 1 year ago)
• Language: TypeScript
• Size: 203 KB
• Stars: 5
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# use-container-query

> React hook for element-based media queries.

[![NPM](https://img.shields.io/npm/v/use-container-query.svg)](https://www.npmjs.com/package/use-container-query) [![JavaScript Style Guide](https://badgen.net/badge/code%20style/airbnb/ff5a5f?icon=airbnb)](https://github.com/airbnb/javascript)[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://codesandbox.io/s/github/LXSMNSYC/use-container-query/tree/main/example)

## Install

```bash

yarn add use-container-query

```

## Usage

```tsx

import useContainerQuery from 'use-container-query';

function LandscapeOnly() {

  const ref = useRef(null);

  const isLandscape = useContainerQuery(ref, {

    type: 'orientation',

    value: 'landscape',

  });

  return (

    


      { isLandscape

        ? 'This element is on landscape orientation'

        : 'This element is on portrait orientation'

      }

    

  );

}

```


### 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](https://github.com/lxsmnsyc)