`import useMediaQuery from 'box-ui-elements/es/components/media-query/useMediaQuery';`

The `useMediaQuery` hook returns properties composed of specific media queries and view dimensions.
These properties can be used to implement custom component rendering or behavior.

## Return props

| Property        | Description                                           |
| --------------- | ----------------------------------------------------- |
| `anyHover`      | `hover`, `none`                                       |
| `anyPointer`    | `none`, `coarse`, `fine`                              |
| `hover`         | `hover`, `none`                                       |
| `pointer`       | `none`, `coarse`, `fine`                              |
| `isTouchDevice` | `true` if `hover` is `none` and `pointer` is `coarse` |
| `size`          | `small`, `medium`, `large`, `x-large`                 |
| `viewHeight`    | view height in px of last query change                |
| `viewWidth`     | view width in px of last query change                 |

## `size` properties

| Size      | Query                                        |
| --------- | -------------------------------------------- |
| `small`   | `(max-width: 374px)`                         |
| `medium`  | `(min-width: 375px) and (max-width: 767px)`  |
| `large`   | `(min-width: 768px) and (max-width: 1023px)` |
| `x-large` | `(min-width: 1024px)`                        |

## Demo

Change device size in "Canvas" or in browser developer tools