useMediaQuery

Create responsive designs in functional components using Orbit's useMediaQuery hook.

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:

import useMediaQuery from "@kiwicom/orbit-components/lib/hooks/useMediaQuery";

Then you can use it in your functional component:

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.

NameTypeDescription
isMediumMobilebooleantrue if viewport equals or is more than 414px
isLargeMobilebooleantrue if viewport equals or is more than 576px
isTabletbooleantrue if viewport equals or is more than 768px
isDesktopbooleantrue if viewport equals or is more than 992px
isLargeDesktopbooleantrue if viewport equals or is more than 1200px
prefersReducedMotionbooleantrue if device uses reduced motion. Please mind that this media query selector doesn’t work on IE10+ and therefore it will be always false