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

If you want to see it in action, try our example on CodeSandbox.

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>
  )
}

Development setup

This project uses tsdx to set up the development environment.

The recommended workflow is to run TSDX in one terminal:

yarn start

This builds to /dist and runs the project in watch mode so any edits you save inside src causes a rebuild to /dist.

Then run the example inside another:

cd example
yarn
yarn start

To do a one-off build, use yarn build.

To run tests, use yarn test.

How to contribute

See our guide on contributing.

Release History

See our changelog.

License

Copyright © 2020 Klarna Bank AB

For license details, see the LICENSE file in the root of this project.