useMediaQuery

信息

在功能组件中以编程方式测试和监控媒体查询

1.实现

import { useState, useCallback, useEffect } from 'react';

const useMediaQuery = (queries = [], values = [], defaultValue) => {
  const mediaQueryList = queries.map(q => window.matchMedia(q));

  const getValue = useCallback(() => {
    const index = mediaQueryList.findIndex(mql => mql.matches);
    return typeof values[index] !== 'undefined' ? values[index] : defaultValue;
  }, [mediaQueryList, values, defaultValue]);

  const [value, setValue] = useState(getValue);

  useEffect(() => {
    const handler = () => setValue(getValue);
    mediaQueryList.forEach(mql => mql.addEventListener('change', handler));

    return () =>
      mediaQueryList.forEach(mql => mql.removeEventListener('change', handler));
  }, [getValue, mediaQueryList]);

  return value;
};

export default useMediaQuery;

2.使用

添加一个媒体查询来检查设备是否允许用户悬停在元素上。这样，如果用户可以悬停或应用基本样式，就可以添加特定的不透明样式。

import { useMediaQuery } from "./hooks";

function App() {
  const canHover = useMediaQuery(
    // Media queries
    ["(hover: hover)"],
    // Values corresponding to the above media queries by array index
    [true],
    // Default value
    false
  );

  const canHoverClass = "opacity-0 hover:opacity-100 transition-opacity";
  const defaultClass = "opacity-100";

  return (
    <div className={canHover ? canHoverClass : defaultClass}>Hover me!</div>
  );
}

export default App;