mediamux
v1.1.0
Published
A utility for writing responsive React components
Downloads
8
Readme
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>
)
}
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.