Implement responsive designs in React & React Native with the useMediaQuery hook and component. Learn how to use the React useMediaQuery hook today. useMediaQuery is a custom hook that helps detect matches between a single media query or multiple media queries. React Native does not natively support media queries, so useMediaQuery is still limited.

API Reference

To use this component in your project, include the following import statement in your file.

import { useMediaQuery } from '@gluestack-ui/utils/hooks';

const flexDir = useMediaQuery({
  minWidth: 480,
  maxWidth: 1280,
});

Hook Arguments

This section provides a comprehensive reference list for the hook arguments, detailing descriptions, properties, types, and default behavior for easy project integration.

useBreakPointValue

Name	Type	Default
options	{ [key: maxHeight \| maxWidth \| minHeight \| minWidth \| orientation] : value } Array<{ [key: maxHeight \| maxWidth \| minHeight \| minWidth \| orientation] : value }	-

Return Value

The useMediaQuery hook returns an array of booleans, indicating whether the given query matches or queries match.

Why an array?

useMediaQuery accepts both an object and an array of object, but will always return an array. This way, you can combine multiple media queries which will be individually matched in a single call. The options to use are still limited to maxWidth, minWidth, maxHeight, minHeight, orientation.

Edit this page on GitHub

Go backuseBreakPointValue

Up nextDashboard App

Go backuseBreakPointValue

Up nextDashboard App