useMedia
Track whether a CSS media query matches, such as a breakpoint, dark mode or reduced motion. Safe to use with server rendering.
- Level
- Basic
- Since
- v1.0.0
import {useMedia} from '@zenuilabs/react-hooks';Loading demo_
More in Browser & Device
Browser & DeviceBasicuseBatteryReads the battery level and charging state from the Battery Status API. Use it to pause heavy work or warn the user when the battery is low.Browser & DeviceIntermediateuseBreakpointReports the active min-width breakpoint using matchMedia, so by default components re-render only when a breakpoint is crossed. Opt in to live width tracking when you need the exact width. Hydration safe, with custom breakpoint maps.Browser & DeviceIntermediateuseColorSchemeStores a light, dark or system color scheme preference and resolves it against the OS setting. The choice persists to localStorage, syncs across tabs, and is hydration safe.