useMediaQuery

The useMediaQuery hook provides an easy way to track and respond to media query changes in a React component. This is particularly useful for implementing responsive design where you need to conditionally render or style components based on the viewport or device characteristics.

Usage

First, you need to import the useMediaQuery hook from the kitchn package.

import { useMediaQuery } from "kitchn";

Example

Here is an example of how to use the useMediaQuery hook in a component:

() => {
  const isDesktop = useMediaQuery("(min-width: 1224px)");

  return (
    <Container>
      {isDesktop ? (
        <Text>You are on a desktop or laptop screen.</Text>
      ) : (
        <Text>You are on a mobile or tablet screen.</Text>
      )}
    </Container>
  );
};

Parameters

The useMediaQuery hook accepts the following parameter:

Return Value

The useMediaQuery hook returns a boolean value: