@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
34 lines (24 loc) • 2.49 kB
Markdown
# useMediaQuery
The `useMediaQuery` hook lets you use media queries in your functional component and differentiate its render for different viewports.
To implement the useMediaQuery hook into your project, add the import:
```jsx
import useMediaQuery from "@kiwicom/orbit-components/lib/hooks/useMediaQuery";
```
Then you can use it in your functional component:
```jsx
const Component = () => {
const { isDesktop } = useMediaQuery();
return <div>{isDesktop ? "We are on desktop" : "We are on mobile or tablet"}</div>;
};
```
Because Orbit aims to be mobile-first, you should consider your base return without conditional rendering to be the mobile one. Therefore, the `useMediaQuery` hook returns only an object of booleans according to the possible breakpoints you might know from normal CSS media queries or dynamic media properties on components.
## Return
The `useMediaQuery` hook returns an object with boolean values depending on which viewport the user is currently on or what system preferences have the device.
| Name | Type | Description |
| :------------------- | :-------- | :--------------------------------------------------------------------------------------------------------------------------------------------- |
| isMediumMobile | `boolean` | `true` if viewport equals or is more than `414px` |
| isLargeMobile | `boolean` | `true` if viewport equals or is more than `576px` |
| isTablet | `boolean` | `true` if viewport equals or is more than `768px` |
| isDesktop | `boolean` | `true` if viewport equals or is more than `992px` |
| isLargeDesktop | `boolean` | `true` if viewport equals or is more than `1200px` |
| prefersReducedMotion | `boolean` | `true` if device uses reduced motion. Please mind that this media query selector doesn't work on IE10+ and therefore it will be always `false` |