NeoTerm UI

useMediaQuery

Track whether a CSS media query matches.

Import

import { useMediaQuery } from "neoterm-ui";

Usage

const isMobile = useMediaQuery("(max-width: 768px)");
const prefersLight = useMediaQuery("(prefers-color-scheme: light)");

return isMobile ? <MobileNav /> : <DesktopNav />;

Signature

function useMediaQuery(query: string): boolean

Parameters

PropTypeDefaultDescription
querystringCSS media query string.

Returns

boolean — true when the media query matches.