react-native-media-query - npm Package Compare versions

Comparing version 1.0.4-alpha.1 to 1.0.4-alpha.2

index.js

 const flush = () => {};
-export { useMediaQuery } from './useMediaQuery';
-export { flush };
+import { useMediaQuery } from './useMediaQuery';
+
+const StyleSheet = {
+    create: (stylesWithQuery, id) => useMediaQuery(stylesWithQuery, id )
+}
+
+export { flush, useMediaQuery, StyleSheet };
+export default StyleSheet

index.web.js

@@ -1,2 +0,9 @@
-export { useMediaQuery } from './useMediaQuery';
-export { flush } from './utils/inject';
+import { useMediaQuery } from './useMediaQuery';
+import { flush } from './utils/inject';
+
+const StyleSheet = {
+    create: (stylesWithQuery, id) => useMediaQuery(stylesWithQuery, id )
+}
+
+export { flush, useMediaQuery, StyleSheet }
+export default StyleSheet

package.json

 {
   "name": "react-native-media-query",
-  "version": "1.0.4-alpha.1",
+  "version": "1.0.4-alpha.2",
   "description": "Media queries for react-native and react-native-web",
@@ -5,0 +5,0 @@ "main": "index",

README.md

@@ -10,3 +10,3 @@ # react-native-media-query
 ```javascript
-import { useMediaQuery } from 'react-native-media-query';
+import StyleSheet from 'react-native-media-query';
 
@@ -26,4 +26,4 @@ //note that StyleSheet.create shouldn't be used here
 
-// for now css classes on web are being generated based on this ComponentIdentifier, so it shouldn't be the same in different files. Component name could be used. 
-const [ids, styles] = useMediaQuery(styles);
+// for now css media queries on web are being generated based on this ComponentIdentifier, so it shouldn't be the same in different files. Component name could be used. 
+const {ids, styles} = StyleSheet.create(styles, 'HomeScreen');
 
@@ -30,0 +30,0 @@ ...

useMediaQuery/index.js

@@ -5,4 +5,4 @@ import { Dimensions } from 'react-native';
 
-const createStyle = (_, stylesWithQuery) => {
-    let cleanStyles = JSON.parse(JSON.stringify(stylesWithQuery || {}));
+const createStyle = (stylesWithQuery = {}, _) => {
+    let cleanStyles = JSON.parse(JSON.stringify(stylesWithQuery));
 
@@ -34,8 +34,8 @@ Object.keys(stylesWithQuery).map((key) => {
     });
-    return cleanStyles;
+    return { cleanStyles, fullStyles: stylesWithQuery };
 };
 
-export const useMediaQuery = (_, stylesWithQuery) => {
-    const styles = createStyle(_, stylesWithQuery);
-    return [{}, styles];
+export const useMediaQuery = (stylesWithQuery, _) => {
+    const {cleanStyles, fullStyles} = createStyle(stylesWithQuery, _);
+    return { ids: {}, styles: cleanStyles, fullStyles };
 };

useMediaQuery/index.web.js

@@ -5,6 +5,5 @@ import { setRule } from '../utils/inject';
 
-const createStyle = (id, stylesWithQuery) => {
+const createStyle =  (stylesWithQuery = {}, id = "") => {
     let ids = {};
-    const cleanStyles = JSON.parse(JSON.stringify(stylesWithQuery || {}));
-    
+    const cleanStyles = JSON.parse(JSON.stringify(stylesWithQuery));
     Object.keys(stylesWithQuery).map((key) => {
@@ -20,2 +19,3 @@ if (!stylesWithQuery?.[key]) {
         queries.map((query) => {
+            if (id){
                 const css = createDeclarationBlock(stylesWithQuery[key][query]);
@@ -31,12 +31,12 @@ ids = { ...ids, [key]: identifier };
 
-                setRule(`${identifier}`, str);
+                setRule(`${identifier}`, str);}
                 delete cleanStyles[key][query];
             });
     });
-    return { ids, cleanStyles };
+    return { ids, cleanStyles, fullStyles: stylesWithQuery };
 };
 
-export const useMediaQuery = (id, stylesWithQuery) => {
-    const { ids, cleanStyles } = createStyle(id, stylesWithQuery);
-    return [ids, cleanStyles];
+export const useMediaQuery = (stylesWithQuery, id) => {
+    const { ids, cleanStyles, fullStyles } = createStyle(stylesWithQuery, id);
+    return { ids, styles: cleanStyles, fullStyles };
 };

No alert changes

Improved metrics

Total package byte prevSize

8603

6.2%

Lines of code

146

5.8%

No dependency changes