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:
Name | Type | Description |
---|---|---|
query | string | The media query string to match against. This should be a valid CSS media query. |
Return Value
The useMediaQuery
hook returns a boolean value:
Type | Description |
---|---|
boolean | true if the media query matches the current viewport, false otherwise. |