The useMediaQuery hook allows you to listen to CSS media queries and reactively update your components based on viewport changes. Ideal for responsive design and dynamic layouts.

Example Usage

resize for test

Preview

sm (425px): false

md (768px): false

custom (800px): false

Code

<script lang="ts">
  import { useMediaQuery } from "@fefade-ui/svelte"

  const isSm = useMediaQuery("max-width", "sm")
  const isMd = useMediaQuery("max-width", "md")
  const isCustom = useMediaQuery("max-width", "800px")
</script>

<h4>sm (425px): {isSm.value}</h4>
<h4>md (768px): {isMd.value}</h4>
<h4>custom (800px): {isCustom.value}</h4>

Props

Prop	Type	Default	Description
feature	string	—	The CSS media feature to match, such as "max-width", "min-width", "orientation", etc.
value	string	—	The threshold value for the media feature, e.g., "768px", "sm", "md". Supports standard breakpoints and custom values.
options	object	{}	Optional configuration for the media query listener (e.g., initial value).