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.

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.