useMedia

Matches a CSS media query and reactively updates when the viewport changes.

Tracks whether a CSS media query matches the current viewport and reactively updates when conditions change. Supports a default state for server-side rendering environments.

Import#

import { useMedia } from '@volue/wave-react';

Example#

useMedia uses window.matchMedia underneath, so provide a default state for server-side rendering where window.matchMedia is not available.

API Reference#

Arguments#

Prop
Type
Default
query*
string
defaultState
boolean

Returns#

boolean