react-json-formatter - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

dist/index.js

@@ -7,3 +7,4 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
   var json = _ref.json,
-      tabWith = _ref.tabWith;
+      tabWith = _ref.tabWith,
+      JsonStyle = _ref.JsonStyle;
   var jsonObject = JSON.parse(json);
@@ -16,3 +17,3 @@
       repeatedTabSpace.push( /*#__PURE__*/React.createElement("span", {
-        className: "react-json-tabSpace",
+        style: JsonStyle.tabSpaceStyle,
         key: i
@@ -32,3 +33,3 @@ }, '\xa0'.repeat(tabWith || 4)));
           var dataJSX = /*#__PURE__*/React.createElement("span", {
-            className: "react-json-number"
+            style: JsonStyle.numberStyle
           }, data);
@@ -41,3 +42,3 @@ return dataJSX;
           var _dataJSX = /*#__PURE__*/React.createElement("span", {
-            className: "react-json-string"
+            style: JsonStyle.stringStyle
           }, "\"", data, "\"");
@@ -51,5 +52,5 @@
           var _dataJSX2 = data ? /*#__PURE__*/React.createElement("span", {
-            className: "react-json-true"
+            style: JsonStyle.booleanTrueStyle
           }, "true") : /*#__PURE__*/React.createElement("span", {
-            className: "react-json-false"
+            style: JsonStyle.booleanFalseStyle
           }, "false");
@@ -67,3 +68,3 @@
           }, /*#__PURE__*/React.createElement("span", {
-            className: "react-json-brace"
+            style: JsonStyle.braceStyle
           }, '{'), /*#__PURE__*/React.createElement("br", null)));
@@ -78,7 +79,7 @@
             }, repeatTabSpace(TabSpaceRepeatTimes), /*#__PURE__*/React.createElement("span", {
-              className: "react-json-property"
+              style: JsonStyle.propertyStyle
             }, "\"" + i + "\""), /*#__PURE__*/React.createElement("span", {
-              className: "react-json-colon"
+              style: JsonStyle.colonStyle
             }, ": "), categorize(data[i]), i === keys[keys.length - 1] ? null : /*#__PURE__*/React.createElement("span", {
-              className: "react-json-comma"
+              style: JsonStyle.commaStyle
             }, ","), /*#__PURE__*/React.createElement("br", null)));
@@ -92,3 +93,3 @@ }
           }, repeatTabSpace(TabSpaceRepeatTimes), /*#__PURE__*/React.createElement("span", {
-            className: "react-json-brace"
+            style: JsonStyle.braceStyle
           }, '}')));
@@ -106,3 +107,3 @@
           }, /*#__PURE__*/React.createElement("span", {
-            className: "react-json-bracket"
+            style: JsonStyle.bracketStyle
           }, "["), /*#__PURE__*/React.createElement("br", null)));
@@ -116,3 +117,3 @@
             }, repeatTabSpace(TabSpaceRepeatTimes), categorize(data[_i]), _i === data.length - 1 ? null : /*#__PURE__*/React.createElement("span", {
-              className: "react-json-comma"
+              style: JsonStyle.commaStyle
             }, ","), /*#__PURE__*/React.createElement("br", null)));
@@ -126,3 +127,3 @@ }
           }, repeatTabSpace(TabSpaceRepeatTimes), /*#__PURE__*/React.createElement("span", {
-            className: "react-json-bracket"
+            style: JsonStyle.bracketStyle
           }, "]")));
@@ -136,3 +137,3 @@
           var _dataJSX5 = /*#__PURE__*/React.createElement("span", {
-            className: "react-json-null"
+            style: JsonStyle.nullStyle
           }, "null");
@@ -146,3 +147,3 @@
   return /*#__PURE__*/React.createElement("div", {
-    className: "react-json"
+    style: JsonStyle.style
   }, /*#__PURE__*/React.createElement("div", null, categorize(jsonObject)));
@@ -149,0 +150,0 @@ };

dist/index.modern.js

@@ -5,3 +5,4 @@ import React from 'react';
   var json = _ref.json,
-      tabWith = _ref.tabWith;
+      tabWith = _ref.tabWith,
+      JsonStyle = _ref.JsonStyle;
   var jsonObject = JSON.parse(json);
@@ -14,3 +15,3 @@
       repeatedTabSpace.push( /*#__PURE__*/React.createElement("span", {
-        className: "react-json-tabSpace",
+        style: JsonStyle.tabSpaceStyle,
         key: i
@@ -30,3 +31,3 @@ }, '\xa0'.repeat(tabWith || 4)));
           var dataJSX = /*#__PURE__*/React.createElement("span", {
-            className: "react-json-number"
+            style: JsonStyle.numberStyle
           }, data);
@@ -39,3 +40,3 @@ return dataJSX;
           var _dataJSX = /*#__PURE__*/React.createElement("span", {
-            className: "react-json-string"
+            style: JsonStyle.stringStyle
           }, "\"", data, "\"");
@@ -49,5 +50,5 @@
           var _dataJSX2 = data ? /*#__PURE__*/React.createElement("span", {
-            className: "react-json-true"
+            style: JsonStyle.booleanTrueStyle
           }, "true") : /*#__PURE__*/React.createElement("span", {
-            className: "react-json-false"
+            style: JsonStyle.booleanFalseStyle
           }, "false");
@@ -65,3 +66,3 @@
           }, /*#__PURE__*/React.createElement("span", {
-            className: "react-json-brace"
+            style: JsonStyle.braceStyle
           }, '{'), /*#__PURE__*/React.createElement("br", null)));
@@ -76,7 +77,7 @@
             }, repeatTabSpace(TabSpaceRepeatTimes), /*#__PURE__*/React.createElement("span", {
-              className: "react-json-property"
+              style: JsonStyle.propertyStyle
             }, "\"" + i + "\""), /*#__PURE__*/React.createElement("span", {
-              className: "react-json-colon"
+              style: JsonStyle.colonStyle
             }, ": "), categorize(data[i]), i === keys[keys.length - 1] ? null : /*#__PURE__*/React.createElement("span", {
-              className: "react-json-comma"
+              style: JsonStyle.commaStyle
             }, ","), /*#__PURE__*/React.createElement("br", null)));
@@ -90,3 +91,3 @@ }
           }, repeatTabSpace(TabSpaceRepeatTimes), /*#__PURE__*/React.createElement("span", {
-            className: "react-json-brace"
+            style: JsonStyle.braceStyle
           }, '}')));
@@ -104,3 +105,3 @@
           }, /*#__PURE__*/React.createElement("span", {
-            className: "react-json-bracket"
+            style: JsonStyle.bracketStyle
           }, "["), /*#__PURE__*/React.createElement("br", null)));
@@ -114,3 +115,3 @@
             }, repeatTabSpace(TabSpaceRepeatTimes), categorize(data[_i]), _i === data.length - 1 ? null : /*#__PURE__*/React.createElement("span", {
-              className: "react-json-comma"
+              style: JsonStyle.commaStyle
             }, ","), /*#__PURE__*/React.createElement("br", null)));
@@ -124,3 +125,3 @@ }
           }, repeatTabSpace(TabSpaceRepeatTimes), /*#__PURE__*/React.createElement("span", {
-            className: "react-json-bracket"
+            style: JsonStyle.bracketStyle
           }, "]")));
@@ -134,3 +135,3 @@
           var _dataJSX5 = /*#__PURE__*/React.createElement("span", {
-            className: "react-json-null"
+            style: JsonStyle.nullStyle
           }, "null");
@@ -144,3 +145,3 @@
   return /*#__PURE__*/React.createElement("div", {
-    className: "react-json"
+    style: JsonStyle.style
   }, /*#__PURE__*/React.createElement("div", null, categorize(jsonObject)));
@@ -147,0 +148,0 @@ };

package.json

 {
   "name": "react-json-formatter",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Formatting json data to JSX of React",
@@ -30,24 +30,24 @@ "author": "ronny1020",
   "peerDependencies": {
-    "react": "^16.0.0"
+    "react": "^16.13.1"
   },
   "devDependencies": {
-    "microbundle-crl": "^0.13.10",
-    "babel-eslint": "^10.0.3",
+    "babel-eslint": "^10.1.0",
     "cross-env": "^7.0.2",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.7.0",
-    "eslint-config-standard": "^14.1.0",
+    "eslint": "^7.7.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-config-standard": "^14.1.1",
     "eslint-config-standard-react": "^9.2.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-node": "^11.0.0",
-    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-react": "^7.17.0",
+    "eslint-plugin-react": "^7.20.6",
     "eslint-plugin-standard": "^4.0.1",
-    "gh-pages": "^2.2.0",
+    "gh-pages": "^3.1.0",
+    "microbundle-crl": "^0.13.11",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.0.4",
+    "prettier": "^2.0.5",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "^3.4.1"
+    "react-scripts": "^3.4.3"
   },
@@ -64,3 +64,2 @@ "files": [
   },
-  "dependencies": {},
   "keywords": [
@@ -67,0 +66,0 @@ "json",

README.md

@@ -10,3 +10,3 @@ # react-json-formatter
 ```bash
-npm install --save react-json-formatter
+npm i react-json-formatter
 ```
@@ -22,3 +22,2 @@
 import { JsonFormatter } from 'react-json-formatter'
-import './index.css'
 
@@ -64,17 +63,14 @@ const App = () => {
 
-  return <JsonFormatter json={sample} tabWith='2' />
+  const JsonStyle = {
+    propertyStyle: { color: 'red' },
+    stringStyle: { color: 'green' },
+    numberStyle: { color: 'darkorange' }
+  }
+
+  return <JsonFormatter json={sample} tabWith='4' JsonStyle={JsonStyle} />
 }
 
 export default App
-}
 ```
 
-index.css
-
-```css
-.react-json-property {
-  color: red;
-}
-```
-
 ## Demo
@@ -97,19 +93,21 @@
 
-There is className for each part of the formatted Json.
-Thus, the style can be changed by className.
+Use the Object JsonStyle to control the style of formatted Json.
 
-| className           | part                                      |
-| ------------------- | ----------------------------------------- |
-| react-json          | The whole parts of the formatted Json.    |
-| react-json-tabSpace | The space of the tabs at Object or Array. |
-| react-json-number   | The numbers in Json.                      |
-| react-json-string   | The strings in Json.                      |
-| react-json-true     | The boolean values of true in Json.       |
-| react-json-false    | The boolean values of false in Json.      |
-| react-json-brace    | The braces of Object.                     |
-| react-json-property | The properties of Object.                 |
-| react-json-colon    | The colons of Object.                     |
-| react-json-bracket  | The brackets of Array.                    |
-| react-json-null     | The null values in Json                   |
+- from the 0.2.0 version, NOT support for className.
 
+| style         | part                                      |
+| ------------- | ----------------------------------------- |
+| propertyStyle | The properties of Object.                 |
+| colonStyle    | The colons of Object.                     |
+| style         | The whole parts of the formatted Json.    |
+| tabSpaceStyle | The space of the tabs at Object or Array. |
+| numberStyle   | The numbers in Json.                      |
+| stringStyle   | The strings in Json.                      |
+| trueStyle     | The boolean values of true in Json.       |
+| falseStyle    | The boolean values of false in Json.      |
+| nullStyle     | The null values in Json                   |
+| commaStyle    | The commas used in Array and Object       |
+| braceStyle    | The braces of Object.                     |
+| bracketStyle  | The brackets of Array.                    |
+
 ## Contributing
@@ -116,0 +114,0 @@

No alert changes

Improved metrics

Total package byte prevSize

28984

increased by7.74%

Number of package files

8

increased by14.29%

Lines of code

229

increased by0.88%

Worsened metrics

Number of lines in readme file

116

decreased by-1.69%

No dependency changes