@skyisaakash/box-ui-elements-fork
Version:
30 lines (22 loc) • 1.27 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` |
| `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