react-json-formatter - npm Package Compare versions

Comparing version 0.3.2 to 0.4.0

dist/index.d.ts

@@ -1,18 +0,18 @@
-import React from 'react';
-export declare type JsonObject = {
+import { CSSProperties } from 'react';
+export type JsonObject = {
     [key: string]: JsonObject;
-} | string | number | boolean | null;
+} | string | number | boolean | null | undefined;
 interface JsonStyle {
-    booleanStyle?: React.CSSProperties;
-    braceStyle?: React.CSSProperties;
-    bracketStyle?: React.CSSProperties;
-    commaStyle?: React.CSSProperties;
-    falseStyle?: React.CSSProperties;
-    nullStyle?: React.CSSProperties;
-    numberStyle?: React.CSSProperties;
-    propertyStyle?: React.CSSProperties;
-    stringStyle?: React.CSSProperties;
-    style?: React.CSSProperties;
-    tabSpaceStyle?: React.CSSProperties;
-    trueStyle?: React.CSSProperties;
+    booleanStyle?: CSSProperties;
+    braceStyle?: CSSProperties;
+    bracketStyle?: CSSProperties;
+    commaStyle?: CSSProperties;
+    falseStyle?: CSSProperties;
+    nullStyle?: CSSProperties;
+    numberStyle?: CSSProperties;
+    propertyStyle?: CSSProperties;
+    stringStyle?: CSSProperties;
+    style?: CSSProperties;
+    tabSpaceStyle?: CSSProperties;
+    trueStyle?: CSSProperties;
 }
@@ -33,9 +33,24 @@ interface JsonClassName {
 }
-interface JsonFormatterProps {
-    json: string;
+export interface JsonFormatterProps {
+    /**
+     * The JSON data to be formatted. The value could be a stringified string or a valid json object.
+     */
+    json: string | JsonObject;
+    /**
+     * Optional class names for different elements of the JSON formatter.
+     */
     jsonClassName?: JsonClassName;
+    /**
+     * Optional inline styles for different elements of the JSON formatter.
+     */
     jsonStyle?: JsonStyle;
+    /**
+     * The width of the tab space. Default is 2.
+     */
     tabWith?: number;
 }
-export default function JsonFormatter({ json, tabWith, jsonStyle: { booleanStyle, braceStyle, bracketStyle, commaStyle, falseStyle, nullStyle, numberStyle, propertyStyle, stringStyle, style, tabSpaceStyle, trueStyle }, jsonClassName: { booleanClassName, braceClassName, bracketClassName, className, commaClassName, falseClassName, nullClassName, numberClassName, propertyClassName, stringClassName, tabSpaceClassName, trueClassName } }: JsonFormatterProps): JSX.Element;
+/**
+ * A React component that formats and displays JSON data in a styled manner.
+ */
+export default function JsonFormatter({ json, jsonClassName: { booleanClassName, braceClassName, bracketClassName, className, commaClassName, falseClassName, nullClassName, numberClassName, propertyClassName, stringClassName, tabSpaceClassName, trueClassName }, jsonStyle: { booleanStyle, braceStyle, bracketStyle, commaStyle, falseStyle, nullStyle, numberStyle, propertyStyle, stringStyle, style, tabSpaceStyle, trueStyle }, tabWith }: JsonFormatterProps): JSX.Element;
 export {};

dist/index.js

@@ -1,223 +0,137 @@
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var React = require('react');
-var React__default = _interopDefault(React);
-
-function _extends() {
-  _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];
-        }
+import React, { useMemo, useCallback } from "react";
+function JsonFormatter({
+  json,
+  jsonClassName: {
+    booleanClassName = "",
+    braceClassName = "",
+    bracketClassName = "",
+    className = "",
+    commaClassName = "",
+    falseClassName = "",
+    nullClassName = "",
+    numberClassName = "",
+    propertyClassName = "",
+    stringClassName = "",
+    tabSpaceClassName = "",
+    trueClassName = ""
+  } = {},
+  jsonStyle: {
+    booleanStyle = {},
+    braceStyle = {},
+    bracketStyle = {},
+    commaStyle = {},
+    falseStyle = {},
+    nullStyle = {},
+    numberStyle = {},
+    propertyStyle = {},
+    stringStyle = {},
+    style = {},
+    tabSpaceStyle = {},
+    trueStyle = {}
+  } = {},
+  tabWith = 2
+}) {
+  const jsonObject = useMemo(() => {
+    if (typeof json === "string") {
+      try {
+        return JSON.parse(json);
+      } catch (error) {
+        return json;
       }
     }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-function JsonFormatter(_ref) {
-  var json = _ref.json,
-      _ref$tabWith = _ref.tabWith,
-      tabWith = _ref$tabWith === void 0 ? 2 : _ref$tabWith,
-      _ref$jsonStyle = _ref.jsonStyle;
-  _ref$jsonStyle = _ref$jsonStyle === void 0 ? {} : _ref$jsonStyle;
-  var _ref$jsonStyle$boolea = _ref$jsonStyle.booleanStyle,
-      booleanStyle = _ref$jsonStyle$boolea === void 0 ? {} : _ref$jsonStyle$boolea,
-      _ref$jsonStyle$braceS = _ref$jsonStyle.braceStyle,
-      braceStyle = _ref$jsonStyle$braceS === void 0 ? {} : _ref$jsonStyle$braceS,
-      _ref$jsonStyle$bracke = _ref$jsonStyle.bracketStyle,
-      bracketStyle = _ref$jsonStyle$bracke === void 0 ? {} : _ref$jsonStyle$bracke,
-      _ref$jsonStyle$commaS = _ref$jsonStyle.commaStyle,
-      commaStyle = _ref$jsonStyle$commaS === void 0 ? {} : _ref$jsonStyle$commaS,
-      _ref$jsonStyle$falseS = _ref$jsonStyle.falseStyle,
-      falseStyle = _ref$jsonStyle$falseS === void 0 ? {} : _ref$jsonStyle$falseS,
-      _ref$jsonStyle$nullSt = _ref$jsonStyle.nullStyle,
-      nullStyle = _ref$jsonStyle$nullSt === void 0 ? {} : _ref$jsonStyle$nullSt,
-      _ref$jsonStyle$number = _ref$jsonStyle.numberStyle,
-      numberStyle = _ref$jsonStyle$number === void 0 ? {} : _ref$jsonStyle$number,
-      _ref$jsonStyle$proper = _ref$jsonStyle.propertyStyle,
-      propertyStyle = _ref$jsonStyle$proper === void 0 ? {} : _ref$jsonStyle$proper,
-      _ref$jsonStyle$string = _ref$jsonStyle.stringStyle,
-      stringStyle = _ref$jsonStyle$string === void 0 ? {} : _ref$jsonStyle$string,
-      _ref$jsonStyle$style = _ref$jsonStyle.style,
-      style = _ref$jsonStyle$style === void 0 ? {} : _ref$jsonStyle$style,
-      _ref$jsonStyle$tabSpa = _ref$jsonStyle.tabSpaceStyle,
-      tabSpaceStyle = _ref$jsonStyle$tabSpa === void 0 ? {} : _ref$jsonStyle$tabSpa,
-      _ref$jsonStyle$trueSt = _ref$jsonStyle.trueStyle,
-      trueStyle = _ref$jsonStyle$trueSt === void 0 ? {} : _ref$jsonStyle$trueSt,
-      _ref$jsonClassName = _ref.jsonClassName;
-  _ref$jsonClassName = _ref$jsonClassName === void 0 ? {} : _ref$jsonClassName;
-  var _ref$jsonClassName$bo = _ref$jsonClassName.booleanClassName,
-      booleanClassName = _ref$jsonClassName$bo === void 0 ? '' : _ref$jsonClassName$bo,
-      _ref$jsonClassName$br = _ref$jsonClassName.braceClassName,
-      braceClassName = _ref$jsonClassName$br === void 0 ? '' : _ref$jsonClassName$br,
-      _ref$jsonClassName$br2 = _ref$jsonClassName.bracketClassName,
-      bracketClassName = _ref$jsonClassName$br2 === void 0 ? '' : _ref$jsonClassName$br2,
-      _ref$jsonClassName$cl = _ref$jsonClassName.className,
-      className = _ref$jsonClassName$cl === void 0 ? '' : _ref$jsonClassName$cl,
-      _ref$jsonClassName$co = _ref$jsonClassName.commaClassName,
-      commaClassName = _ref$jsonClassName$co === void 0 ? '' : _ref$jsonClassName$co,
-      _ref$jsonClassName$fa = _ref$jsonClassName.falseClassName,
-      falseClassName = _ref$jsonClassName$fa === void 0 ? '' : _ref$jsonClassName$fa,
-      _ref$jsonClassName$nu = _ref$jsonClassName.nullClassName,
-      nullClassName = _ref$jsonClassName$nu === void 0 ? '' : _ref$jsonClassName$nu,
-      _ref$jsonClassName$nu2 = _ref$jsonClassName.numberClassName,
-      numberClassName = _ref$jsonClassName$nu2 === void 0 ? '' : _ref$jsonClassName$nu2,
-      _ref$jsonClassName$pr = _ref$jsonClassName.propertyClassName,
-      propertyClassName = _ref$jsonClassName$pr === void 0 ? '' : _ref$jsonClassName$pr,
-      _ref$jsonClassName$st = _ref$jsonClassName.stringClassName,
-      stringClassName = _ref$jsonClassName$st === void 0 ? '' : _ref$jsonClassName$st,
-      _ref$jsonClassName$ta = _ref$jsonClassName.tabSpaceClassName,
-      tabSpaceClassName = _ref$jsonClassName$ta === void 0 ? '' : _ref$jsonClassName$ta,
-      _ref$jsonClassName$tr = _ref$jsonClassName.trueClassName,
-      trueClassName = _ref$jsonClassName$tr === void 0 ? '' : _ref$jsonClassName$tr;
-  var jsonObject = React.useMemo(function () {
-    return JSON.parse(json);
+    return json;
   }, [json]);
-  var repeatTabSpace = React.useCallback(function (times) {
-    var repeatedTabSpace = [];
-
-    for (var i = 0; i < times; i++) {
-      repeatedTabSpace.push(React__default.createElement("span", {
-        className: tabSpaceClassName,
-        key: i,
-        style: tabSpaceStyle
-      }, '\xa0'.repeat(tabWith || 4)));
-    }
-
-    return repeatedTabSpace;
-  }, [tabSpaceClassName, tabSpaceStyle, tabWith]);
-  var categorize = React.useCallback(function (data) {
-    var TabSpaceRepeatTimes = 0;
-
-    switch (Object.prototype.toString.call(data)) {
-      case '[object Number]':
-        {
-          var dataJSX = React__default.createElement("span", {
-            className: numberClassName,
-            style: numberStyle
-          }, data);
-          return dataJSX;
+  const repeatTabSpace = useCallback(
+    (times) => /* @__PURE__ */ React.createElement("span", { className: tabSpaceClassName, style: tabSpaceStyle }, " ".repeat(tabWith * times)),
+    [tabSpaceClassName, tabSpaceStyle, tabWith]
+  );
+  const categorize = useCallback(
+    (data, tabSpaceRepeatTimes) => {
+      switch (Object.prototype.toString.call(data)) {
+        case "[object Number]": {
+          return /* @__PURE__ */ React.createElement("span", { className: numberClassName, style: numberStyle }, data);
         }
-
-      case '[object String]':
-        {
-          var _dataJSX = React__default.createElement("span", {
-            className: stringClassName,
-            style: stringStyle
-          }, "\"" + data + "\"");
-
-          return _dataJSX;
+        case "[object String]": {
+          return /* @__PURE__ */ React.createElement(
+            "span",
+            {
+              className: stringClassName,
+              style: stringStyle
+            },
+            `"${data}"`
+          );
         }
-
-      case '[object Boolean]':
-        {
-          var _dataJSX2 = data ? React__default.createElement("span", {
-            className: booleanClassName + " " + trueClassName,
-            style: _extends({}, booleanStyle, trueStyle)
-          }, "true") : React__default.createElement("span", {
-            className: booleanClassName + " " + falseClassName,
-            style: _extends({}, booleanStyle, falseStyle)
-          }, "false");
-
-          return _dataJSX2;
+        case "[object Boolean]": {
+          const dataJSX = data ? /* @__PURE__ */ React.createElement(
+            "span",
+            {
+              className: `${booleanClassName} ${trueClassName}`,
+              style: { ...booleanStyle, ...trueStyle }
+            },
+            "true"
+          ) : /* @__PURE__ */ React.createElement(
+            "span",
+            {
+              className: `${booleanClassName} ${falseClassName}`,
+              style: { ...booleanStyle, ...falseStyle }
+            },
+            "false"
+          );
+          return dataJSX;
         }
-
-      case '[object Object]':
-        {
-          var _dataJSX3 = [];
-
-          _dataJSX3.push(React__default.createElement(React__default.Fragment, {
-            key: '{'
-          }, React__default.createElement("span", {
-            className: braceClassName,
-            style: braceStyle
-          }, '{'), React__default.createElement("br", null)));
-
-          var keys = Object.keys(data);
-          TabSpaceRepeatTimes += 1;
-          Object.keys(data).forEach(function (key, index) {
-            _dataJSX3.push(React__default.createElement(React__default.Fragment, {
-              key: index
-            }, repeatTabSpace(TabSpaceRepeatTimes), React__default.createElement("span", {
-              className: propertyClassName,
-              style: propertyStyle
-            }, "\"" + key + "\": "), categorize(data[key]), index !== keys.length - 1 && React__default.createElement("span", null, ","), React__default.createElement("br", null)));
-          });
-          TabSpaceRepeatTimes -= 1;
-
-          _dataJSX3.push(React__default.createElement(React__default.Fragment, {
-            key: '}'
-          }, repeatTabSpace(TabSpaceRepeatTimes), React__default.createElement("span", {
-            className: braceClassName,
-            style: braceStyle
-          }, '}')));
-
-          return _dataJSX3;
+        case "[object Object]": {
+          return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: braceClassName, style: braceStyle }, "{"), /* @__PURE__ */ React.createElement("br", null), Object.entries(data).map(
+            ([key, value], index, list) => /* @__PURE__ */ React.createElement(React.Fragment, { key: index }, repeatTabSpace(tabSpaceRepeatTimes + 1), /* @__PURE__ */ React.createElement(
+              "span",
+              {
+                className: propertyClassName,
+                style: propertyStyle
+              },
+              `"${key}": `
+            ), categorize(value, tabSpaceRepeatTimes + 1), index !== list.length - 1 && /* @__PURE__ */ React.createElement("span", { className: commaClassName, style: commaStyle }, ","), /* @__PURE__ */ React.createElement("br", null))
+          ), repeatTabSpace(tabSpaceRepeatTimes), /* @__PURE__ */ React.createElement("span", { className: braceClassName, style: braceStyle }, "}"));
         }
-
-      case '[object Array]':
-        {
-          var _dataJSX4 = [];
-
-          _dataJSX4.push(React__default.createElement(React__default.Fragment, {
-            key: '['
-          }, React__default.createElement("span", {
-            className: bracketClassName,
-            style: bracketStyle
-          }, "["), React__default.createElement("br", null)));
-
-          TabSpaceRepeatTimes += 1;
-
-          for (var i = 0; i < data.length; i++) {
-            _dataJSX4.push(React__default.createElement(React__default.Fragment, {
-              key: i
-            }, repeatTabSpace(TabSpaceRepeatTimes), categorize(data[i]), i === data.length - 1 ? null : React__default.createElement("span", {
-              className: commaClassName,
-              style: commaStyle
-            }, ","), React__default.createElement("br", null)));
-          }
-
-          TabSpaceRepeatTimes -= 1;
-
-          _dataJSX4.push(React__default.createElement(React__default.Fragment, {
-            key: ']'
-          }, repeatTabSpace(TabSpaceRepeatTimes), React__default.createElement("span", {
-            className: bracketClassName,
-            style: bracketStyle
-          }, "]")));
-
-          return _dataJSX4;
+        case "[object Array]": {
+          return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: bracketClassName, style: bracketStyle }, "["), /* @__PURE__ */ React.createElement("br", null), data.map((value, index, list) => /* @__PURE__ */ React.createElement(React.Fragment, { key: index }, repeatTabSpace(tabSpaceRepeatTimes + 1), categorize(value, tabSpaceRepeatTimes + 1), index !== list.length - 1 && /* @__PURE__ */ React.createElement("span", { className: commaClassName, style: commaStyle }, ","), /* @__PURE__ */ React.createElement("br", null))), repeatTabSpace(tabSpaceRepeatTimes), /* @__PURE__ */ React.createElement("span", { className: bracketClassName, style: bracketStyle }, "]"));
         }
-
-      case '[object Null]':
-        {
-          var _dataJSX5 = React__default.createElement("span", {
-            className: nullClassName,
-            style: nullStyle
-          }, "null");
-
-          return _dataJSX5;
+        case "[object Null]": {
+          return /* @__PURE__ */ React.createElement("span", { className: nullClassName, style: nullStyle }, "null");
         }
-
-      default:
-        return React__default.createElement("span", null, "type error");
-    }
-  }, [booleanClassName, booleanStyle, braceClassName, braceStyle, bracketClassName, bracketStyle, commaClassName, commaStyle, falseClassName, falseStyle, nullClassName, nullStyle, numberClassName, numberStyle, propertyClassName, propertyStyle, repeatTabSpace, stringClassName, stringStyle, trueClassName, trueStyle]);
-  var result = React.useMemo(function () {
-    return categorize(jsonObject);
-  }, [categorize, jsonObject]);
-  return React__default.createElement("div", {
-    className: className,
-    style: style
-  }, React__default.createElement("div", null, result));
+        default:
+          return /* @__PURE__ */ React.createElement("span", null, "type error");
+      }
+    },
+    [
+      booleanClassName,
+      booleanStyle,
+      braceClassName,
+      braceStyle,
+      bracketClassName,
+      bracketStyle,
+      commaClassName,
+      commaStyle,
+      falseClassName,
+      falseStyle,
+      nullClassName,
+      nullStyle,
+      numberClassName,
+      numberStyle,
+      propertyClassName,
+      propertyStyle,
+      repeatTabSpace,
+      stringClassName,
+      stringStyle,
+      trueClassName,
+      trueStyle
+    ]
+  );
+  const result = useMemo(
+    () => categorize(jsonObject, 0),
+    [categorize, jsonObject]
+  );
+  return /* @__PURE__ */ React.createElement("div", { className, style }, /* @__PURE__ */ React.createElement("div", null, result));
 }
-
-module.exports = JsonFormatter;
+export {
+  JsonFormatter as default
+};
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-json-formatter",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "Formatting json data to JSX of React",
@@ -19,11 +19,20 @@ "keywords": [
   },
+  "type": "module",
   "license": "MIT",
-  "author": "ronny1020",
-  "main": "dist/index.js",
-  "module": "dist/index.modern.js",
-  "source": "src/index.tsx",
-  "types": "dist/index.d.ts",
+  "author": {
+    "name": "ronny1020"
+  },
   "directories": {
     "example": "example"
   },
+  "main": "dist/index.umd.cjs",
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    }
+  },
+  "source": "src/index.tsx",
+  "types": "dist/index.d.ts",
   "files": [
@@ -33,58 +42,71 @@ "dist"
   "scripts": {
-    "build": "microbundle-crl --no-compress --format modern,cjs",
-    "predeploy": "cd example && yarn install && yarn run build",
-    "deploy": "gh-pages -d example/build",
-    "prepare": "run-s build",
-    "start": "microbundle-crl watch --no-compress --format modern,cjs",
-    "test": "run-s test:unit test:lint test:build",
-    "test:build": "run-s build",
-    "test:lint": "eslint .",
-    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
-    "test:watch": "react-scripts test --env=jsdom"
+    "build": "vite build",
+    "build-storybook": "storybook build",
+    "lint": "eslint --fix src .storybook",
+    "lint-staged": "npx --no-install lint-staged",
+    "type-check": "tsc --noEmit",
+    "prepare": "husky install",
+    "test": "vitest",
+    "test-husky": "vitest --run",
+    "storybook": "storybook dev -p 6006",
+    "chromatic": "npx chromatic --project-token=chpt_6d2a9426aaad6f1"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.17.0",
-    "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^12.1.4",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.4.1",
-    "@types/node": "^17.0.21",
-    "@types/react": "^17.0.40",
-    "@types/react-dom": "^17.0.13",
-    "@typescript-eslint/eslint-plugin": "^5.14.0",
-    "@typescript-eslint/parser": "^5.14.0",
-    "babel-eslint": "^10.0.3",
+    "@storybook/addon-essentials": "7.0.24",
+    "@storybook/addon-interactions": "7.0.24",
+    "@storybook/addon-links": "7.0.24",
+    "@storybook/blocks": "7.0.24",
+    "@storybook/react": "7.0.24",
+    "@storybook/react-vite": "7.0.24",
+    "@storybook/testing-library": "0.2.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@types/node": "^20.3.3",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
+    "@types/testing-library__jest-dom": "^5.14.6",
+    "@typescript-eslint/eslint-plugin": "^5.60.1",
+    "@typescript-eslint/parser": "^5.60.1",
+    "@vitejs/plugin-react": "^4.0.1",
+    "@vitest/coverage-v8": "^0.32.4",
+    "chromatic": "^6.19.9",
     "cross-env": "^7.0.3",
-    "eslint": "^8.11.0",
+    "eslint": "^8.44.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-airbnb-typescript": "^16.1.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-config-react-app": "^7.0.0",
-    "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-jest": "^25.3.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-promise": "^6.0.0",
-    "eslint-plugin-react": "^7.27.1",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-sort-destructure-keys": "^1.4.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-sort-destructure-keys": "^1.5.0",
     "eslint-plugin-sort-keys-fix": "^1.1.2",
     "eslint-plugin-standard": "^4.1.0",
-    "eslint-plugin-typescript-sort-keys": "^2.1.0",
-    "gh-pages": "^3.2.3",
-    "microbundle-crl": "^0.13.11",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^2.5.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "^5.0.0",
-    "typescript": "^4.6.2"
+    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-typescript-sort-keys": "^2.3.0",
+    "husky": "^8.0.3",
+    "jsdom": "^22.1.0",
+    "lint-staged": "^13.2.3",
+    "prettier": "^2.8.8",
+    "prop-types": "15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "7.0.24",
+    "typescript": "^5.1.6",
+    "vite": "^4.3.9",
+    "vite-plugin-dts": "^3.0.2",
+    "vitest": "^0.32.2"
   },
   "peerDependencies": {
-    "react": ">16.2.0"
+    "react": ">16.2.0",
+    "react-dom": ">16.0.0"
   },
   "engines": {
     "node": ">=10"
-  }
+  },
+  "readme": "ERROR: No README data found!",
+  "_id": "react-json-formatter@0.3.2"
 }

README.md

@@ -9,2 +9,4 @@ # react-json-formatter
 
+### npm
+
 ```bash
@@ -14,2 +16,14 @@ npm i react-json-formatter
 
+### yarn
+
+```bash
+yarn add react-json-formatter
+```
+
+### pnpm
+
+```bash
+pnpm i react-json-formatter
+```
+
 ## Usage
@@ -77,7 +91,7 @@
 
-[Demo](https://ronny1020.github.io/react-json-formatter/)
+[Demo](https://master--64a2e29586ad3ad1694ee152.chromatic.com)
 
 ## Attributes
 
-### json: string(Json)
+### json: string(Json) or valid json object
 
@@ -89,3 +103,3 @@ The string of Json to formate.
 The number of spaces it should use per tab.
-The default is 4.
+The default is 2.
 
@@ -92,0 +106,0 @@ ## styles

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Number of lines in readme file

149

increased by10.37%

Is type module

Yes

Worsened metrics

Total package byte prevSize

41798

decreased by-21.46%

Dependency count

2

increased by100%

Dev dependency count

47

increased by27.03%

Lines of code

337

decreased by-21.45%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes