{"id":20324157,"url":"https://github.com/klarna-incubator/mediamux","last_synced_at":"2025-07-08T22:05:40.942Z","repository":{"id":37267556,"uuid":"287471773","full_name":"klarna-incubator/mediamux","owner":"klarna-incubator","description":"A utility for writing responsive React components in a concise, maintainable, mobile-first way.","archived":false,"fork":false,"pushed_at":"2025-05-05T19:34:35.000Z","size":214,"stargazers_count":21,"open_issues_count":15,"forks_count":1,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-06-06T16:45:40.894Z","etag":null,"topics":["css-in-js","hooks","inline-styles","mobile-first","react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/klarna-incubator.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null}},"created_at":"2020-08-14T07:29:34.000Z","updated_at":"2025-05-05T19:34:37.000Z","dependencies_parsed_at":"2022-09-01T08:40:45.832Z","dependency_job_id":null,"html_url":"https://github.com/klarna-incubator/mediamux","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/klarna-incubator/mediamux","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/klarna-incubator%2Fmediamux","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/klarna-incubator%2Fmediamux/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/klarna-incubator%2Fmediamux/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/klarna-incubator%2Fmediamux/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/klarna-incubator","download_url":"https://codeload.github.com/klarna-incubator/mediamux/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/klarna-incubator%2Fmediamux/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263992674,"owners_count":23540852,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-in-js","hooks","inline-styles","mobile-first","react"],"created_at":"2024-11-14T19:32:42.687Z","updated_at":"2025-07-08T22:05:40.919Z","avatar_url":"https://github.com/klarna-incubator.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mediamux\n\u003e A utility for writing responsive React components in a concise, maintainable, mobile-first way.\n\n[![Build Status][ci-image]][ci-url]\n[![License][license-image]][license-url]\n[![Developed at Klarna][klarna-image]][klarna-url]\n\n\nAt 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`.\n\n_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/).\n\n## Usage example\n\nIf you want to see it in action, try [our example on CodeSandbox](https://codesandbox.io/s/unruffled-kepler-jlmdr?file=/src/App.js).\n\n```js\nconst theme = {\n  breakpoints: [\"768px\", \"1200px\"]\n}\n\nconst App = () =\u003e {\n  return (\n    \u003cMediamuxProvider theme={theme}\u003e\n      \u003cExample /\u003e\n    \u003c/MediamuxProvider\u003e\n  );\n};\n\nfunction Example() {\n  const mmx = useMediamux()\n\n  // this will render \"small\" if viewport \u003c 768px,\n  // \"medium\" if viewport between 768px and 1200px,\n  // \"large\" if viewport is 1200px or larger\n  return (\n    \u003cdiv\u003e\n      {mmx(\"small\", \"medium\", \"large\")}\n    \u003c/div\u003e\n  )\n}\n```\n\n## Development setup\n\nThis project uses [tsdx](https://github.com/formium/tsdx) to set up the development environment.\n\nThe recommended workflow is to run TSDX in one terminal:\n\n```bash\nyarn start\n```\n\nThis builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.\n\nThen run the example inside another:\n\n```bash\ncd example\nyarn\nyarn start\n```\n\nTo do a one-off build, use `yarn build`.\n\nTo run tests, use `yarn test`.\n\n## How to contribute\n\nSee our guide on [contributing](.github/CONTRIBUTING.md).\n\n## Release History\n\nSee our [changelog](CHANGELOG.md).\n\n## License\n\nCopyright © 2020 Klarna Bank AB\n\nFor license details, see the [LICENSE](LICENSE) file in the root of this project.\n\n\n\u003c!-- Markdown link \u0026 img dfn's --\u003e\n[ci-image]: https://img.shields.io/badge/build-passing-brightgreen?style=flat-square\n[ci-url]: https://github.com/klarna-incubator/TODO\n[license-image]: https://img.shields.io/badge/license-Apache%202-blue?style=flat-square\n[license-url]: http://www.apache.org/licenses/LICENSE-2.0\n[klarna-image]: https://img.shields.io/badge/%20-Developed%20at%20Klarna-black?labelColor=ffb3c7\u0026style=flat-square\u0026logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAAXNSR0IArs4c6QAAAIRlWElmTU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAALQAAAAAQAAAtAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABCgAwAEAAAAAQAAAA4AAAAA0LMKiwAAAAlwSFlzAABuugAAbroB1t6xFwAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KTMInWQAAAVBJREFUKBVtkz0vREEUhsdXgo5qJXohkUgQ0fgFNFpR2V5ClP6CQu9PiB6lEL1I7B9A4/treZ47c252s97k2ffMmZkz5869m1JKL/AFbzAHaiRbmsIf4BdaMAZqMFsOXNxXkroKbxCPV5l8yHOJLVipn9/vEreLa7FguSN3S2ynA/ATeQuI8tTY6OOY34DQaQnq9mPCDtxoBwuRxPfAvPMWnARlB12KAi6eLTPruOOP4gcl33O6+Sjgc83DJkRH+h2MgorLzaPy68W48BG2S+xYnmAa1L+nOxEduMH3fgjGFvZeVkANZau68B6CrgJxWosFFpF7iG+h5wKZqwt42qIJtARu/ix+gqsosEq8D35o6R3c7OL4lAnTDljEe9B3Qa2BYzmHemDCt6Diwo6JY7E+A82OnN9HuoBruAQvUQ1nSxP4GVzBDRyBfygf6RW2/gD3NmEv+K/DZgAAAABJRU5ErkJggg==\n[klarna-url]: https://github.com/klarna-incubator\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fklarna-incubator%2Fmediamux","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fklarna-incubator%2Fmediamux","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fklarna-incubator%2Fmediamux/lists"}