SSE Hooks

useMediaQuery

Custom hook that tracks the state of a media query using the [Match Media API](https://developer.

Installation

npx sse-tool add use-media-query

Usage

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

NameTypeDescription
querystringThe media query to track.
optionsUseMediaQueryOptionsThe options for customizing the behavior of the hook (optional).

Return Value

Returns boolean.

The current state of the media query (true if the query matches, false otherwise).

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

Built with Love • © 2026