useMediaQuery
See also:
useBreakpoints
Reactive Media Query. Once you’ve created a MediaQueryList object, you can check the result of the query or receive notifications when the result changes.
This implementation is original ported from vueuse/useMediaQuery
Usage #
isLargeScreen: false
prefersDark: false
- Svelte
<script lang="ts">
import { useMediaQuery } from 'sveltuse'
const isLargeScreen = useMediaQuery('(min-width: 1024px)')
const isPreferredDark = useMediaQuery('(prefers-color-scheme: dark)')
</script>
<div>
<div>isLargeScreen: {$isLargeScreen}</div>
<div>prefersDark: {$isPreferredDark}</div>
</div>