[Feature Request]: Responsive values outside of `sx` prop

I have a component that takes a size prop that cannot be set using the sx prop, which I want to pass a responsive value based on the current breakpoint.

Currently I’ve made a makeshift solution that reads theme.breakpoints and uses window.matchMedia to match the current breakpoint. I think that theme-ui could benefit by having something similar.

import { useThemeUI } from "theme-ui";

function matchBreakpoint(breakpoint) {
  const test = window.matchMedia(`(max-width: ${breakpoint})`);

  return test.matches ? true : false;
}

function getCurrentBreakpointIndex(breakpoints) {
  let matchedIndex = breakpoints.findIndex(matchBreakpoint);

  if (matchedIndex === -1) {
    matchedIndex = breakpoints.length - 1;
  }

  return matchedIndex;
}

const useResponsiveValue = responsiveValues => {
  const { theme: { breakpoints } } = useThemeUI();
  const responsiveIndex = getCurrentBreakpointIndex(breakpoints);

  // @TODO: update on window resize event

  return responsiveValues[responsiveIndex];
};

// ...

const SomeComponent = () => {
  const size = useResponsiveValue([10, 20, 30]);

  return <OtherComponent size={size} />;
}

[jxnblk]

Thanks! I could certainly see the value in adding an optional hook package for using window.matchMedia with the theme object

[jxnblk]

Using npm link with webpack (and Gatsby) tends to be kind of buggy, which is why we use Yarn workspaces in this repo – not sure if that’s something that might be related to the issues you’re seeing. Let me know if you’re still interested in working on this