Skip to content

useMediaQuery

Package
Share - Core
Category
Description
reactive [Media Query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries)

Reactive Media Query. Once you've created a MediaQueryList object, you can check the result of the query or receive notifications when the result changes.

Demo

isLargeScreen: false
prefersDark: false

Usage

js
import { useMediaQuery } from '@hungpvq/shared-core';

const isLargeScreen = useMediaQuery('(min-width: 1024px)');
const isPreferredDark = useMediaQuery('(prefers-color-scheme: dark)');