https://github.com/klarna-incubator/mediamux
A utility for writing responsive React components in a concise, maintainable, mobile-first way.
https://github.com/klarna-incubator/mediamux
css-in-js hooks inline-styles mobile-first react
Last synced: 11 months ago
JSON representation
A utility for writing responsive React components in a concise, maintainable, mobile-first way.
- Host: GitHub
- URL: https://github.com/klarna-incubator/mediamux
- Owner: klarna-incubator
- License: apache-2.0
- Created: 2020-08-14T07:29:34.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2025-05-05T19:34:35.000Z (about 1 year ago)
- Last Synced: 2025-06-06T16:45:40.894Z (about 1 year ago)
- Topics: css-in-js, hooks, inline-styles, mobile-first, react
- Language: TypeScript
- Homepage:
- Size: 209 KB
- Stars: 21
- Watchers: 6
- Forks: 1
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
# Mediamux
> A utility for writing responsive React components in a concise, maintainable, mobile-first way.
[![Build Status][ci-image]][ci-url]
[![License][license-image]][license-url]
[![Developed at Klarna][klarna-image]][klarna-url]
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](https://theme-ui.com/getting-started/#responsive-styles) for applying responsive styles in [theme-ui](https://theme-ui.com/) and [styled-system](https://styled-system.com/).
## Usage example
If you want to see it in action, try [our example on CodeSandbox](https://codesandbox.io/s/unruffled-kepler-jlmdr?file=/src/App.js).
```js
const theme = {
breakpoints: ["768px", "1200px"]
}
const App = () => {
return (
);
};
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 (
{mmx("small", "medium", "large")}
)
}
```
## Development setup
This project uses [tsdx](https://github.com/formium/tsdx) to set up the development environment.
The recommended workflow is to run TSDX in one terminal:
```bash
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:
```bash
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](.github/CONTRIBUTING.md).
## Release History
See our [changelog](CHANGELOG.md).
## License
Copyright © 2020 Klarna Bank AB
For license details, see the [LICENSE](LICENSE) file in the root of this project.
[ci-image]: https://img.shields.io/badge/build-passing-brightgreen?style=flat-square
[ci-url]: https://github.com/klarna-incubator/TODO
[license-image]: https://img.shields.io/badge/license-Apache%202-blue?style=flat-square
[license-url]: http://www.apache.org/licenses/LICENSE-2.0
[klarna-image]: https://img.shields.io/badge/%20-Developed%20at%20Klarna-black?labelColor=ffb3c7&style=flat-square&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAAXNSR0IArs4c6QAAAIRlWElmTU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAALQAAAAAQAAAtAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABCgAwAEAAAAAQAAAA4AAAAA0LMKiwAAAAlwSFlzAABuugAAbroB1t6xFwAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KTMInWQAAAVBJREFUKBVtkz0vREEUhsdXgo5qJXohkUgQ0fgFNFpR2V5ClP6CQu9PiB6lEL1I7B9A4/treZ47c252s97k2ffMmZkz5869m1JKL/AFbzAHaiRbmsIf4BdaMAZqMFsOXNxXkroKbxCPV5l8yHOJLVipn9/vEreLa7FguSN3S2ynA/ATeQuI8tTY6OOY34DQaQnq9mPCDtxoBwuRxPfAvPMWnARlB12KAi6eLTPruOOP4gcl33O6+Sjgc83DJkRH+h2MgorLzaPy68W48BG2S+xYnmAa1L+nOxEduMH3fgjGFvZeVkANZau68B6CrgJxWosFFpF7iG+h5wKZqwt42qIJtARu/ix+gqsosEq8D35o6R3c7OL4lAnTDljEe9B3Qa2BYzmHemDCt6Diwo6JY7E+A82OnN9HuoBruAQvUQ1nSxP4GVzBDRyBfygf6RW2/gD3NmEv+K/DZgAAAABJRU5ErkJggg==
[klarna-url]: https://github.com/klarna-incubator