useMediaQuery

Custom hook that tracks the state of a media query using the Match Media API.

Installation

npx sse-hooks add use-media-query

yarn dlx sse-hooks add use-media-query

pnpm dlx sse-hooks add use-media-query

deno run -A npm:sse-hooks add use-media-query

bunx sse-hooks add use-media-query

Usage

example.ts

import { useMediaQuery } from "./{hooks file}";

const isSmallScreen = useMediaQuery("(max-width: 600px)");
// Use `isSmallScreen` to conditionally apply styles or logic based on the screen size.

API

Parameters

Prop	Default	Type
`options`	`{}`	`UseMediaQueryOptions` The options for customizing the behavior of the hook (optional).
`query`	-	`string` The media query to track.

Returns

Return Value	Default	Type
`return`	-	`boolean` Hook return value

Types Aliases

No specific type aliases defined for this component.

Changelog

c165d — feat: enhance useRoleGuard and useSSR hooks with additional options and documentation

30da4 — feat: add new hooks and their metadata

cf13e — feat: add custom hooks for step navigation, ternary dark mode, timeout, toggle, unmount, and window size

useKey

A powerful sensor hook for handling keyboard shortcuts, sequences, and modifiers. It supports complex key combinations (`Ctrl+Shift+S`), Gmail-style sequences (`g then i`), and provides metadata for generating "Keyboard Shortcut" UI help modals.

useMediaSession

Custom hook that interacts with the Media Session API. It allows you to customize media notifications and handle media control events (like play, pause, next track) from the system's notification area or lock screen.