Dashboard sipadu mbip
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

useMediaQuery.js 1.7KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. import useEffect from './useIsomorphicEffect';
  2. import { useState } from 'react';
  3. var isBool = function isBool(a) {
  4. return typeof a === 'boolean';
  5. };
  6. var matchers = new Map();
  7. var getMatcher = function getMatcher(query) {
  8. if (!query || typeof window == 'undefined') return undefined;
  9. var mql = matchers.get(query);
  10. if (!mql) {
  11. mql = window.matchMedia(query);
  12. mql.refCount = 0;
  13. matchers.set(mql.media, mql);
  14. }
  15. return mql;
  16. };
  17. /**
  18. * Match a media query and get updates as the match changes. The media string is
  19. * passed directly to `window.matchMedia` and run as a Layout Effect, so initial
  20. * matches are returned before the browser has a chance to paint.
  21. *
  22. * ```tsx
  23. * function Page() {
  24. * const isWide = useMediaQuery('min-width: 1000px')
  25. *
  26. * return isWide ? "very wide" : 'not so wide'
  27. * }
  28. * ```
  29. *
  30. * Media query lists are also reused globally, hook calls for the same query
  31. * will only create a matcher once under the hood.
  32. *
  33. * @param query A media query
  34. */
  35. export default function useMediaQuery(query) {
  36. var mql = getMatcher(query);
  37. var _useState = useState(function () {
  38. return mql ? mql.matches : false;
  39. }),
  40. matches = _useState[0],
  41. setMatches = _useState[1];
  42. useEffect(function () {
  43. var mql = getMatcher(query);
  44. if (!mql) {
  45. return setMatches(false);
  46. }
  47. var handleChange = function handleChange() {
  48. setMatches(mql.matches);
  49. };
  50. mql.refCount++;
  51. mql.addListener(handleChange);
  52. handleChange();
  53. return function () {
  54. mql.removeListener(handleChange);
  55. mql.refCount--;
  56. if (mql.refCount <= 0) {
  57. matchers.delete(mql.media);
  58. }
  59. mql = undefined;
  60. };
  61. }, [query]);
  62. return matches;
  63. }