react-json-pretty - npm Package Compare versions

Comparing version 1.0.1 to 1.2.0

example/app/Example.jsx

@@ -27,3 +27,3 @@ var React = require('react');
     <div>
-      <JSONPretty json={obj}></JSONPretty>
+      <JSONPretty id="json-pretty" style={{fontSize: "1.5em"}} json={obj}></JSONPretty>
     </div>
@@ -33,4 +33,7 @@ <div>
     </div>
+    <div>
+      <JSONPretty json={React}></JSONPretty>
+    </div>
   </div>,
   document.getElementById('example')
 );

JSONPretty.jsx

@@ -41,3 +41,3 @@ var React = require('react');
     return (
-      <pre className='json-pretty' dangerouslySetInnerHTML={{__html: this._pretty(json)}}>
+      <pre {...this.props} className='json-pretty' dangerouslySetInnerHTML={{__html: this._pretty(json)}}>
       </pre>
@@ -44,0 +44,0 @@ );

package.json

 {
   "name": "react-json-pretty",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "description": "A code formatting tool for raw json data",
@@ -16,3 +16,4 @@ "main": "src/JSONPretty.js",
     "format",
-    "pretty"
+    "pretty",
+    "react-component"
   ],
@@ -19,0 +20,0 @@ "author": "[e-mail]",

README.md

@@ -15,3 +15,3 @@ # React JSON Pretty
 
-The usage is quite simple, assuming that you already have a react application of JavaScript. If you don't, visit [Facebook React](https://facebook.github.io/react/) to create one or just take a look at the example provided.
+The usage is quite simple, assuming that you already have a react application of JavaScript. If you don't, visit [Facebook React](https://facebook.github.io/react/) to create one or just take a look at the [example](https://github.com/chenckang/react-json-pretty/tree/master/example) provided.
 
@@ -24,11 +24,11 @@ Firstly, you need to require the react-json-pretty:
 
-  import JSONPretty from 'react-json-pretty';
+    import JSONPretty from 'react-json-pretty';
 
 Next, in your 'jsx' file use it like the following:
 
-    <JSONPretty json={obj}></JSONPretty>
+    <JSONPretty id="json-pretty" json={obj}></JSONPretty>
 
 Where `obj` is the JSON string or just a valid JavaScript object.
 
-And also you can import the style to the document, here is an example of using webpack loaders(`style!css!stylus`) to load style(You can visit (webpack)[https://webpack.github.io/]) to check it out):
+And also you can import the style to the document, here is an example of using webpack loaders(`style!css!stylus`) to load style, You can visit (webpack)[https://webpack.github.io/] to get more details:
 
@@ -45,3 +45,3 @@ require('react-json-pretty/JSONPretty.monikai.styl');
 
-[Click here to preview!](https://github.com/chenckang/react-json-pretty/blob/master/example/preview.png)
+![previews, you can also find it in the example folder](http://chenckang.github.io/labs/imgs/preview.png)
 
@@ -48,0 +48,0 @@ Have your fun!

src/JSONPretty.js

@@ -0,1 +1,3 @@
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var React = require('react');
@@ -30,8 +32,12 @@
 
-    if (typeof json === 'json') {
-      json = JSON.parse(json);
+    if (typeof json === 'string') {
+      try {
+        json = JSON.parse(json);
+      } catch (e) {
+        console.error("The string is not a valid json data!", e);
+      }
     }
 
-    return React.createElement('pre', { className: 'json-pretty', dangerouslySetInnerHTML: { __html: this._pretty(json) } });
+    return React.createElement('pre', _extends({}, this.props, { className: 'json-pretty', dangerouslySetInnerHTML: { __html: this._pretty(json) } }));
   }
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2107814

increased by0.05%

Lines of code

52130

increased by0.03%

No dependency changes