Mediamux NPM | npm.io

Mediamux

A utility for writing responsive React components in a concise, maintainable, mobile-first way.

At Klarna we use inline styles extensively. In responsive web applications this can lead to verbose, complicated components where we check against specific media queries like isMobile or isDesktop.

Mediamux is a React Hook which returns a function accepting any number of arguments, and returning the argument matching the currently active breakpoint. It is heavily inspired by the array syntax for applying responsive styles in theme-ui and styled-system.

Usage example

const theme = {
  breakpoints: ["768px", "1200px"]
}

const App = () => {
  return (
    <MediamuxProvider theme={theme}>
      <Example />
    </MediamuxProvider>
  );
};

function Example() {
  const mmx = useMediamux()

  // this will render "small" if viewport < 768px,
  // "medium" if viewport between 768px and 1200px,
  // "large" if viewport is 1200px or larger
  return (
    <div>
      {mmx("small", "medium", "large")}
    </div>
  )
}