andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update wording

Browse Source
This commit is contained in:
Chalarangelo
2021-10-13 20:40:54 +03:00
parent a1d4f62042
commit b4dd74f868
18 changed files with 44 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
snippets/useMediaQuery.md
View File

@ -2,13 +2,13 @@
title: useMediaQuery
tags: hooks,state,effect,intermediate
firstSeen: 2020-01-03T14:39:46+02:00
lastUpdated: 2020-11-16T14:17:53+02:00
lastUpdated: 2021-10-13T19:29:39+02:00
---
Checks if the current environment matches a given media query and returns the appropriate value.
- Check if `window` and `window.matchMedia` exist, return `whenFalse` if not (e.g. SSR environment or unsupported browser).
- Use `window.matchMedia()` to match the given `query`, cast its `matches` property to a boolean and store in a state variable, `match`, using the `useState()` hook.
- Check if `window` and `window.matchMedia` exist. Return `whenFalse` if not (e.g. SSR environment or unsupported browser).
- Use `window.matchMedia()` to match the given `query`. Cast its `matches` property to a boolean and store in a state variable, `match`, using the `useState()` hook.
- Use the `useEffect()` hook to add a listener for changes and to clean up the listeners after the hook is destroyed.
- Return either `whenTrue` or `whenFalse` based on the value of `match`.