{"id":17963379,"url":"https://github.com/kristerkari/react-native-css-media-query-processor","last_synced_at":"2025-03-25T05:32:16.441Z","repository":{"id":57336332,"uuid":"125115865","full_name":"kristerkari/react-native-css-media-query-processor","owner":"kristerkari","description":"Match style objects containing CSS Media Queries with React Native","archived":false,"fork":false,"pushed_at":"2019-03-05T19:11:16.000Z","size":246,"stargazers_count":13,"open_issues_count":1,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-29T12:31:43.153Z","etag":null,"topics":["css","css-parser","media-queries","react-native","stylesheets","transform"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kristerkari.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-13T21:17:31.000Z","updated_at":"2023-07-23T17:51:36.000Z","dependencies_parsed_at":"2022-09-11T10:03:19.014Z","dependency_job_id":null,"html_url":"https://github.com/kristerkari/react-native-css-media-query-processor","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristerkari%2Freact-native-css-media-query-processor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristerkari%2Freact-native-css-media-query-processor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristerkari%2Freact-native-css-media-query-processor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristerkari%2Freact-native-css-media-query-processor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kristerkari","download_url":"https://codeload.github.com/kristerkari/react-native-css-media-query-processor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245407605,"owners_count":20610228,"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","css-parser","media-queries","react-native","stylesheets","transform"],"created_at":"2024-10-29T11:35:46.127Z","updated_at":"2025-03-25T05:32:16.130Z","avatar_url":"https://github.com/kristerkari.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native CSS Media Query processor\n\n![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg)\n[![NPM version](http://img.shields.io/npm/v/react-native-css-media-query-processor.svg)](https://www.npmjs.org/package/react-native-css-media-query-processor)\n[![Build Status](https://travis-ci.org/kristerkari/react-native-css-media-query-processor.svg?branch=master)](https://travis-ci.org/kristerkari/react-native-css-media-query-processor)\n[![Build status](https://ci.appveyor.com/api/projects/status/1itowtpn7a51rc5x/branch/master?svg=true)](https://ci.appveyor.com/project/kristerkari/react-native-css-media-query-processor/branch/master)\n[![Coverage Status](https://coveralls.io/repos/github/kristerkari/react-native-css-media-query-processor/badge.svg?branch=master)](https://coveralls.io/github/kristerkari/react-native-css-media-query-processor?branch=master)\n![Size](https://img.shields.io/bundlephobia/minzip/react-native-css-media-query-processor.svg)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)\n\nMatch style objects containing CSS Media Queries with React Native\n\n\u003e This library is based on [React Native Extended StyleSheet](https://github.com/vitalets/react-native-extended-stylesheet)'s CSS Media Queries implementation.\n\n## Installation\n\n```\nnpm install react-native-css-media-query-processor --save-dev\n```\n\nor\n\n```\nyarn add react-native-css-media-query-processor --dev\n```\n\n## Usage\n\nThis library takes parsed CSS with media queries and matches it during runtime with React Native's current device dimensions and device orientation.\n\nTo minimize runtime performance hit, the media queries must be parsed already before calling `process` function. Have a look at the example to see how the parsed syntax looks like.\n\nYou can use this library together with [css-to-react-native-transform](https://github.com/kristerkari/css-to-react-native-transform) to transform a string of CSS containing media queries to an React Native style object.\n\nNotice that there is no syntax validation for CSS media queries. This is done to ensure that the media query matching is as fast as possible. If you want to validate syntax for the media queries, you should do that when they are parsed to style objects (that's what [css-to-react-native-transform](https://github.com/kristerkari/css-to-react-native-transform) does).\n\n### Example\n\nGiven that React Native returns the following dimensions:\n\n```js\nimport { Dimensions } from \"react-native\";\nDimensions.get(\"window\");\n// =\u003e { width: 110, height: 100 }\n```\n\nThis is a simplified example of how the CSS gets transformed in to a React Native compatible style object:\n\n`App.css`:\n\n```css\n.foo {\n  color: red;\n  margin-top: 1px;\n}\n\n.bar {\n  font-size: 1rem;\n}\n\n@media (min-width: 50px) and (max-width: 150px) {\n  .foo {\n    color: blue;\n  }\n  .bar {\n    font-size: 2rem;\n  }\n}\n```\n\n↓ ↓ ↓ ↓ ↓ ↓\n\n```js\nimport styles from \"./App.css\";\nimport transform from \"css-to-react-native-transform\";\n\ntransform(styles, { parseMediaQueries: true });\n```\n\n↓ ↓ ↓ ↓ ↓ ↓\n\n```js\nconst styleObject = {\n  __mediaQueries: {\n    \"@media (min-width: 50px) and (max-width: 150px)\": [\n      {\n        inverse: false,\n        type: \"all\",\n        expressions: [\n          { modifier: \"min\", feature: \"width\", value: \"50px\" },\n          { modifier: \"max\", feature: \"width\", value: \"150px\" }\n        ]\n      }\n    ]\n  },\n  foo: {\n    color: \"red\",\n    marginTop: 1\n  },\n  bar: {\n    fontSize: 16\n  },\n  \"@media (min-width: 50px) and (max-width: 150px)\": {\n    foo: {\n      color: \"blue\"\n    },\n    bar: {\n      fontSize: 32\n    }\n  }\n};\n```\n\n↓ ↓ ↓ ↓ ↓ ↓\n\n```js\nimport { process } from \"react-native-css-media-query-processor\";\nimport { Dimensions } from \"react-native\";\n\nconst win = Dimensions.get(\"window\");\nconst matchObject = {\n  width: win.width,\n  height: win.height,\n  orientation: win.width \u003e win.height ? \"landscape\" : \"portrait\",\n  \"aspect-ratio\": win.width / win.height,\n  type: \"screen\"\n};\n\nprocess(styleObject, matchObject);\n```\n\n↓ ↓ ↓ ↓ ↓ ↓\n\n```js\n{\n  foo: {\n    color: \"blue\",\n    marginTop: 1\n  },\n  bar: {\n    fontSize: 32\n  }\n}\n```\n\n## Dependencies\n\n- [deepmerge](https://github.com/KyleAMathews/deepmerge) - A library for deep (recursive) merging of Javascript objects (UMD bundle is 593B minified+gzipped)\n- [micro-memoize](https://github.com/planttheidea/micro-memoize) - A tiny, crazy fast memoization library for the 95% use-case\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkristerkari%2Freact-native-css-media-query-processor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkristerkari%2Freact-native-css-media-query-processor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkristerkari%2Freact-native-css-media-query-processor/lists"}