Breaking News: Grepper is joining You.com. Read the official announcement!

useMediaQuery | matchMedia

Shy Sable answered on August 22, 2023 Popularity 4/10 Helpfulness 1/10

answer useMediaQuery | matchMedia

related useMediaQuery | matchMedia

useMediaQuery | matchMedia

Comment

function useMediaQuery(query) {
  const [matches, setMatches] = React.useState(false);
  React.useEffect(() => {
    const matchQueryList = window.matchMedia(query);
    function handleChange(e) {
      setMatches(e.matches);
    }
    matchQueryList.addEventListener("change", handleChange);
    return () => {
      matchQueryList.removeEventListener("change", handleChange);
    };
  }, [query]);
  return matches;
}

Popularity 4/10 Helpfulness 1/10 Language javascript

Source: juhanajauhiainen.com

Tags: javascript matchmedia

Link to this answer
Share Copy Link

Contributed on Aug 22 2023

Shy Sable

0 Answers Avg Quality 2/10

Closely Related Answers

useMediaQuery | matchMedia

Comment

import { useEffect, useMemo, useState } from 'react'
/**
 * Check if a media query matches the UI
 * @param {String} mediaQueryString
 * @returns {Boolean}
 *
 * https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
 * https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/change_event
 *
 * Example:
 *    useMediaQuery('(max-width: 600px)');
 *    useMediaQuery('only screen and (min-width: 600px)');
 *    useMediaQuery('@media only screen and (min-width: 600px)');
 */
export function useMediaQuery(mediaQueryString) {
  const queryString = removeReservedMediaKeyWord(mediaQueryString)
  const query = useMemo(() => window.matchMedia(queryString), [queryString])
  const [matches, setMatches] = useState(query.matches) // one-time, instantaneous check
  useEffect(() => {
    const listener = (e) => setMatches(e.matches)
    query.addEventListener('change', listener)
    return () => query.removeEventListener('change', listener)
  }, [query])
  return matches
}
function removeReservedMediaKeyWord(mediaQueryString) {
  return mediaQueryString.replace('@media', '').trim()
}

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: pgarciacamou.medium.com

Tags: javascript matchmedia

Link to this answer
Share Copy Link

Contributed on Aug 22 2023

Shy Sable

0 Answers Avg Quality 2/10

useMediaQuery | matchMedia

Contents

More Related Answers

useMediaQuery | matchMedia

Closely Related Answers

useMediaQuery | matchMedia

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.