Documentation
useMediaQuery

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:

Parameters

The useMediaQuery hook accepts the following parameter:

NameTypeDescription
querystringThe media query string to match against. This should be a valid CSS media query.

Return Value

The useMediaQuery hook returns a boolean value:

TypeDescription
booleantrue if the media query matches the current viewport, false otherwise.