pistachiouseMatchMedia
The matchMedia.
Parameters
typescript
import { useMatchMedia } from '@elonehoo/pistachio'
const matchMedia = useMatchMedia(mediaQueryString)
import { useMatchMedia } from '@elonehoo/pistachio'
const matchMedia = useMatchMedia(mediaQueryString)
| Parameters | Type | Required | Description |
|---|---|---|---|
| mediaQueryString | string | true | A string representing the media query to parse. |
State
The useMatchMedia function exposes the following reactive state:
typescript
import { useMatchMedia } from '@elonehoo/pistachio'
const { supported, mediaQueryList, matches } = useMatchMedia()
import { useMatchMedia } from '@elonehoo/pistachio'
const { supported, mediaQueryList, matches } = useMatchMedia()
| State | Type | Description |
|---|---|---|
| supported | Boolean | Is MatchMedia supported |
| mediaQueryList | MediaQueryList | List of objects stores information on a media query |
| matches | Ref<boolean> | A Boolean that returns true if the document currently matches the media query list, or false if not. |
Methods
The useMatchMedia function exposes the following methods:
typescript
import { useMatchMedia } from '@elonehoo/pistachio'
const { remove } = useMatchMedia()
import { useMatchMedia } from '@elonehoo/pistachio'
const { remove } = useMatchMedia()
| Signature | Description |
|---|---|
| remove | Manually removes the event listener |
Example
Screen less than 600px: false
vue
<script setup lang="ts">
import { useMatchMedia } from '@elonehoo/pistachio'
const { matches } = useMatchMedia('(max-width: 600px)')
</script>
<template>
<div>
<p>
Screen less than 600px: <b>{{ matches }}</b>
</p>
</div>
</template>
<script setup lang="ts">
import { useMatchMedia } from '@elonehoo/pistachio'
const { matches } = useMatchMedia('(max-width: 600px)')
</script>
<template>
<div>
<p>
Screen less than 600px: <b>{{ matches }}</b>
</p>
</div>
</template>