@orfeas126/box-ui-elements
Version:
Box UI Elements
31 lines (23 loc) • 1.51 kB
Markdown
`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