checktheroads-hyperglass/hyperglass/ui/context/MediaProvider.js

import * as React from "react";
import { createContext, useContext, useMemo } from "react";
import { useMediaLayout } from "use-media";

const MediaContext = createContext(null);

export const MediaProvider = ({ theme, children }) => {
  const { sm, md, lg, xl } = theme.breakpoints;
  const isSm = useMediaLayout({ maxWidth: md });
  const isMd = useMediaLayout({ minWidth: md, maxWidth: lg });
  const isLg = useMediaLayout({ minWidth: lg, maxWidth: xl });
  const isXl = useMediaLayout({ minWidth: xl });
  let mediaSize = false;
  switch (true) {
    case isSm:
      mediaSize = "sm";
      break;
    case isMd:
      mediaSize = "md";
      break;
    case isLg:
      mediaSize = "lg";
      break;
    case isXl:
      mediaSize = "xl";
      break;
  }
  const value = useMemo(
    () => ({
      isSm: isSm,
      isMd: isMd,
      isLg: isLg,
      isXl: isXl,
      mediaSize: mediaSize
    }),
    [isSm, isMd, isLg, isXl, mediaSize]
  );
  return (
    <MediaContext.Provider value={value}>{children}</MediaContext.Provider>
  );
};

export const useMedia = () => useContext(MediaContext);