Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kristerkari/react-native-css-media-query-processor
Match style objects containing CSS Media Queries with React Native
https://github.com/kristerkari/react-native-css-media-query-processor
css css-parser media-queries react-native stylesheets transform
Last synced: 3 months ago
JSON representation
Match style objects containing CSS Media Queries with React Native
- Host: GitHub
- URL: https://github.com/kristerkari/react-native-css-media-query-processor
- Owner: kristerkari
- License: mit
- Created: 2018-03-13T21:17:31.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-03-05T19:11:16.000Z (almost 6 years ago)
- Last Synced: 2024-05-01T04:45:57.047Z (9 months ago)
- Topics: css, css-parser, media-queries, react-native, stylesheets, transform
- Language: JavaScript
- Homepage:
- Size: 240 KB
- Stars: 13
- Watchers: 3
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Native CSS Media Query processor
[](https://www.npmjs.org/package/react-native-css-media-query-processor)
[](https://travis-ci.org/kristerkari/react-native-css-media-query-processor)
[](https://ci.appveyor.com/project/kristerkari/react-native-css-media-query-processor/branch/master)
[](https://coveralls.io/github/kristerkari/react-native-css-media-query-processor?branch=master)
[](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)
Match style objects containing CSS Media Queries with React Native
> This library is based on [React Native Extended StyleSheet](https://github.com/vitalets/react-native-extended-stylesheet)'s CSS Media Queries implementation.
## Installation
```
npm install react-native-css-media-query-processor --save-dev
```
or
```
yarn add react-native-css-media-query-processor --dev
```
## Usage
This library takes parsed CSS with media queries and matches it during runtime with React Native's current device dimensions and device orientation.
To 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.
You 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.
Notice 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).
### Example
Given that React Native returns the following dimensions:
```js
import { Dimensions } from "react-native";
Dimensions.get("window");
// => { width: 110, height: 100 }
```
This is a simplified example of how the CSS gets transformed in to a React Native compatible style object:
`App.css`:
```css
.foo {
color: red;
margin-top: 1px;
}
.bar {
font-size: 1rem;
}
@media (min-width: 50px) and (max-width: 150px) {
.foo {
color: blue;
}
.bar {
font-size: 2rem;
}
}
```
↓ ↓ ↓ ↓ ↓ ↓
```js
import styles from "./App.css";
import transform from "css-to-react-native-transform";
transform(styles, { parseMediaQueries: true });
```
↓ ↓ ↓ ↓ ↓ ↓
```js
const styleObject = {
__mediaQueries: {
"@media (min-width: 50px) and (max-width: 150px)": [
{
inverse: false,
type: "all",
expressions: [
{ modifier: "min", feature: "width", value: "50px" },
{ modifier: "max", feature: "width", value: "150px" }
]
}
]
},
foo: {
color: "red",
marginTop: 1
},
bar: {
fontSize: 16
},
"@media (min-width: 50px) and (max-width: 150px)": {
foo: {
color: "blue"
},
bar: {
fontSize: 32
}
}
};
```
↓ ↓ ↓ ↓ ↓ ↓
```js
import { process } from "react-native-css-media-query-processor";
import { Dimensions } from "react-native";
const win = Dimensions.get("window");
const matchObject = {
width: win.width,
height: win.height,
orientation: win.width > win.height ? "landscape" : "portrait",
"aspect-ratio": win.width / win.height,
type: "screen"
};
process(styleObject, matchObject);
```
↓ ↓ ↓ ↓ ↓ ↓
```js
{
foo: {
color: "blue",
marginTop: 1
},
bar: {
fontSize: 32
}
}
```
## Dependencies
- [deepmerge](https://github.com/KyleAMathews/deepmerge) - A library for deep (recursive) merging of Javascript objects (UMD bundle is 593B minified+gzipped)
- [micro-memoize](https://github.com/planttheidea/micro-memoize) - A tiny, crazy fast memoization library for the 95% use-case