Independent Simple JSON Viewer

.eslintrc

@@ -1,6 +1,14 @@
 {
+  "parser": "babel-eslint",
   "env": {
-    "browser": true,
-    "node": true
-  }
+      "browser": true,
+      "node": true
+  },
+  "plugins": [
+      "react-hooks"
+    ],
+    "rules": {
+      "react-hooks/rules-of-hooks": "error",
+      "react-hooks/exhaustive-deps": "warn"
+    }
 }

README.md

@@ -1 +1,59 @@
-Demo: https://cakeinpanic.github.io/simple-react-json-viewer/
+# Simple JSON Viewer Component
+
+[![Netlify Status](https://api.netlify.com/api/v1/badges/dc4e978e-b3fd-4d55-be87-d8b8050c4bc7/deploy-status)](https://app.netlify.com/sites/zen-almeida-5e7020/deploys)
+
+
+
+## Scripts
+
+Run Dependency Installation
+
+```
+npm install
+```
+Build
+
+```
+npm build
+```
+
+Run Project
+
+```
+npm start
+```
+
+## Use Case
+
+```js
+import React from 'react';
+import JsonViwer from './JsonViwer'
+
+//using mock data for test
+const MOCK_DATA = {
+    name: "Additya Rajput",
+    skills: ['Javascript', 'HTML', 'CSS', 'Typescript', 'React'],
+    address: {
+        place: "bengaluru",
+        pincode: 560095
+    },
+    github_url: "https://github.com/apsrcreatix"
+}
+
+//this wrapper is just an example and not needed
+export default function Wrapper(props){
+    return <div className="wrapper">
+		<JsonViwer json={ MOCK_DATA || props.json } />
+         </div>
+}
+```
+
+
+
+## TODO
+
+- [x] To remove the dependency of classnames from component.
+
+## Forked From & Thanks
+Demo: https://cakeinpanic.github.io/simple-react-json-viewer/
+

package.json

@@ -1,10 +1,8 @@
 {
-  "name": "my-app",
+  "name": "simple-json-viewer",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "axios": "^0.19.0",
-    "classnames": "^2.2.6",
     "lodash": "^4.17.15",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",

src/JsonViewer/FoldableJson/JsonObject.js → src/JsonViewer/JsonObject.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import {isPrimitiveType} from "../utils/utils";
-import {FoldableJson} from './FoldableJson';
-import styles from './FoldableJson.module.css';
+import { isPrimitiveType } from "./utils";
+import  JsonViewer  from './index';
+import './index.css';
 
 export class JsonObject extends React.Component {
     renderArray(json) {
@@ -15,12 +15,12 @@ export class JsonObject extends React.Component {
         return (
             <span className={className}>
                 [
-                <div className={styles.json}>
+                <div className="json">
                     {json.map((el, i) => {
                         const lastElement = i === json.length - 1;
                         return (
-                            <span className={styles.json} key={i}>
-                                <FoldableJson json={el} showComma={!lastElement}/>
+                            <span className="json" key={i}>
+                                <JsonViewer json={el} showComma={!lastElement}/>
                             </span>
                         );
                     })}
@@ -37,12 +37,12 @@ export class JsonObject extends React.Component {
         return (
             <span className={className}>
                 {'{'}
-                <div className={styles.json}>
+                <div className="json">
                     {Object.keys(json).map((keyName, i) => {
                         const lastElement = i === keysArr.length - 1;
                         const el = json[keyName];
-
-                        return <FoldableJson json={el} keyName={keyName} key={i} showComma={!lastElement}/>;
+                        
+                        return <JsonViewer json={el} keyName={keyName} key={i} showComma={!lastElement}/>;
                     })}
                 </div>
                 {'}'}