useMediaQuery

Easily retrieve and monitor the state of a CSS media query.

https://www.shaktools.com/shak-hooks

Browser

API Reference

Installation

terminal

pnpm add @shak-hooks/usehooks

import.ts

import { useMediaQuery } from "@shak-hooks/usehooks";

Source: packages/react/src/useMediaQuery.ts

Signature

signature.ts

export function useMediaQuery(query: string): boolean

Parameters

Name	Type	Optional	Default
query	string	No	-

Returns

boolean

Implementation

use-media-query.ts

1import { useState, useEffect } from "react";

3export function useMediaQuery(query: string): boolean {

4 const [matches, setMatches] = useState(false);

6 useEffect(() => {

7 const media = window.matchMedia(query);

8 if (media.matches !== matches) {

9 setMatches(media.matches);

10 }

11 const listener = () => setMatches(media.matches);

12 media.addListener(listener);

13 return () => media.removeListener(listener);

14 }, [matches, query]);

16 return matches;

17}

Google Ads

Usage

example.tsx

1import { useMediaQuery } from "@shak-hooks/usehooks";

3const result = useMediaQuery("...");

4// result: boolean

5// Use values directly (React state).