@uiw/react-json-view - npm Package Compare versions

Comparing version 1.6.0 to 1.7.0

cjs/editor/index.d.ts

 /// <reference types="react" />
-import { JsonViewProps } from '../';
+import type { JsonViewProps } from '../';
+import type { CountInfoExtraProps } from './countInfoExtra';
 export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T> {
@@ -12,2 +13,7 @@ /** Callback when value edit functionality */
     }) => void;
+    /**
+     * When a callback function is passed in, add functionality is enabled. The callback is invoked before additions are completed.
+     * @returns {boolean} Returning false from onAdd will prevent the change from being made.
+     */
+    onAdd?: CountInfoExtraProps<T>['onAdd'];
     /** Whether enable edit feature. @default true */
@@ -14,0 +20,0 @@ editable?: boolean;

cjs/editor/index.js

@@ -14,4 +14,5 @@ "use strict";
 var _value = require("./value");
+var _countInfoExtra = require("./countInfoExtra");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["onEdit", "components", "editable", "displayDataTypes"];
+var _excluded = ["onEdit", "components", "editable", "displayDataTypes", "onAdd"];
 var JsonViewEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
@@ -24,4 +25,11 @@ var onEdit = props.onEdit,
     displayDataTypes = _props$displayDataTyp === void 0 ? true : _props$displayDataTyp,
+    onAdd = props.onAdd,
     reset = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var comps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, components), {}, {
+    countInfoExtra: function countInfoExtra(reprops) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_countInfoExtra.CountInfoExtra, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reprops), {}, {
+        editable: editable,
+        onAdd: onAdd
+      }));
+    },
     objectKey: function objectKey(reprops) {
@@ -28,0 +36,0 @@ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_objectKey.ObjectKey, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reprops), {}, {

cjs/editor/objectKey.d.ts

 import { FC } from 'react';
-import { SemicolonProps } from '../semicolon';
-import { JsonViewEditorProps } from './';
+import type { SemicolonProps } from '../semicolon';
+import type { JsonViewEditorProps } from './';
 export interface ObjectKeyProps<T extends object> extends SemicolonProps {
@@ -5,0 +5,0 @@ onEdit?: JsonViewEditorProps<T>['onEdit'];

cjs/editor/value.d.ts

 /// <reference types="react" />
 import type { TypeProps } from '../value';
-import { JsonViewEditorProps } from './';
+import type { JsonViewEditorProps } from './';
 export interface ReValueProps<T extends object> extends React.HTMLAttributes<HTMLSpanElement> {
@@ -5,0 +5,0 @@ onEdit?: JsonViewEditorProps<T>['onEdit'];

cjs/index.d.ts

 import React from 'react';
-import { SemicolonProps } from './semicolon';
-import { ValueViewProps } from './value';
-import { CopiedProps } from './copied';
-import { EllipsisProps } from './comps/ellipsis';
-import { MetaProps } from './comps/meta';
+import type { SemicolonProps } from './semicolon';
+import type { ValueViewProps } from './value';
+import type { CopiedProps } from './copied';
+import type { EllipsisProps } from './comps/ellipsis';
+import type { MetaProps } from './comps/meta';
+import type { CountInfoExtraProps } from './editor/countInfoExtra';
 export * from './node';
 export * from './value';
+export interface CountInfoProps {
+    count: number;
+    level: number;
+    visible: boolean;
+}
 export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
@@ -47,7 +53,4 @@ /** This property contains your input JSON */
         copied?: CopiedProps<T>['render'];
-        countInfo?: (props: {
-            count: number;
-            level: number;
-            visible: boolean;
-        }) => JSX.Element;
+        countInfo?: (props: CountInfoProps) => JSX.Element;
+        countInfoExtra?: (props: Omit<CountInfoExtraProps<T>, 'editable'>) => JSX.Element;
     };
@@ -54,0 +57,0 @@ }

cjs/node.js

@@ -18,3 +18,3 @@ "use strict";
 var _semicolon = require("./semicolon");
-var _tools = require("./tools");
+var _copied = require("./copied");
 var _ellipsis = require("./comps/ellipsis");
@@ -130,10 +130,17 @@ var _meta = require("./comps/meta");
   }
-  var nameKeys = isArray ? Object.keys(value).map(function (m) {
+  var _useState3 = (0, _react.useState)(value),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    valueData = _useState4[0],
+    setValueData = _useState4[1];
+  (0, _react.useEffect)(function () {
+    return setValueData(value);
+  }, [value]);
+  var nameKeys = isArray ? Object.keys(valueData).map(function (m) {
     return Number(m);
-  }) : Object.keys(value);
+  }) : Object.keys(valueData);
 
   // object
-  var entries = isArray ? Object.entries(value).map(function (m) {
+  var entries = isArray ? Object.entries(valueData).map(function (m) {
     return [Number(m[0]), m[1]];
-  }) : Object.entries(value);
+  }) : Object.entries(valueData);
   if (objectSortKeys) {
@@ -175,3 +182,3 @@ entries = objectSortKeys === true ? entries.sort(function (_ref2, _ref3) {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_semicolon.Semicolon, {
-          value: value,
+          value: valueData,
           quotes: quotes,
@@ -197,8 +204,14 @@ "data-keys": keyid,
         render: components.braces
-      }), displayObjectSize && countInfo, /*#__PURE__*/(0, _jsxRuntime.jsx)(_tools.Tools, {
-        value: value,
-        enableClipboard: enableClipboard,
+      }), displayObjectSize && countInfo, components.countInfoExtra && components.countInfoExtra({
+        count: nameKeys.length,
+        level: level,
+        showTools: showTools,
+        visible: expand,
+        value: valueData,
+        setValue: setValueData
+      }), enableClipboard && /*#__PURE__*/(0, _jsxRuntime.jsx)(_copied.Copied, {
+        show: showTools,
+        text: valueData,
         onCopied: onCopied,
-        components: components,
-        showTools: showTools
+        render: components === null || components === void 0 ? void 0 : components.copied
       })]
@@ -205,0 +218,0 @@ }), expand && /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Line, {

cjs/semicolon.d.ts

@@ -1,4 +0,4 @@
-import { FC, PropsWithChildren } from 'react';
-import { LabelProps } from './value';
-import { JsonViewProps } from './';
+import type { FC, PropsWithChildren } from 'react';
+import type { LabelProps } from './value';
+import type { JsonViewProps } from './';
 export declare function usePrevious<T>(value: T): T | undefined;
@@ -5,0 +5,0 @@ interface UseHighlight {

cjs/value.d.ts

@@ -1,4 +0,4 @@
-import { FC, PropsWithChildren } from 'react';
-import { MetaProps } from './comps/meta';
-import { JsonViewProps } from './';
+import type { FC, PropsWithChildren } from 'react';
+import type { MetaProps } from './comps/meta';
+import type { JsonViewProps } from './';
 export declare const Line: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>>;
@@ -5,0 +5,0 @@ export declare const isFloat: (n: number) => boolean;

editor.d.ts

@@ -5,2 +5,3 @@ /// <reference types="react" />
   import { JsonViewProps } from '@uiw/react-json-view';
+  import type { CountInfoExtraProps } from '@uiw/react-json-view/cjs/editor/countInfoExtra';
   type Option = {
@@ -13,3 +14,17 @@ value: string;
   export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T> {
-    onEdit?: (option: Option) => void;
+    /** Callback when value edit functionality */
+    onEdit?: (option: {
+        value: unknown;
+        oldValue: unknown;
+        keyName?: string | number;
+        parentName?: string | number;
+        type?: 'value' | 'key';
+    }) => void;
+    /**
+     * When a callback function is passed in, add functionality is enabled. The callback is invoked before additions are completed.
+     * @returns {boolean} Returning false from onAdd will prevent the change from being made.
+     */
+    onAdd?: CountInfoExtraProps<T>['onAdd'];
+    /** Whether enable edit feature. @default true */
+    editable?: boolean;
   }
@@ -16,0 +31,0 @@ const JsonViewEditor: import("react").ForwardRefExoticComponent<Omit<JsonViewEditorProps<object>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

esm/editor/index.d.ts

 /// <reference types="react" />
-import { JsonViewProps } from '../';
+import type { JsonViewProps } from '../';
+import type { CountInfoExtraProps } from './countInfoExtra';
 export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T> {
@@ -12,2 +13,7 @@ /** Callback when value edit functionality */
     }) => void;
+    /**
+     * When a callback function is passed in, add functionality is enabled. The callback is invoked before additions are completed.
+     * @returns {boolean} Returning false from onAdd will prevent the change from being made.
+     */
+    onAdd?: CountInfoExtraProps<T>['onAdd'];
     /** Whether enable edit feature. @default true */
@@ -14,0 +20,0 @@ editable?: boolean;

esm/editor/index.js

 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["onEdit", "components", "editable", "displayDataTypes"];
+var _excluded = ["onEdit", "components", "editable", "displayDataTypes", "onAdd"];
 import { forwardRef } from 'react';
@@ -8,2 +8,3 @@ import JsonView from '../';
 import { ReValue } from './value';
+import { CountInfoExtra } from './countInfoExtra';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -15,6 +16,11 @@ var JsonViewEditor = /*#__PURE__*/forwardRef((props, ref) => {
       editable = true,
-      displayDataTypes = true
+      displayDataTypes = true,
+      onAdd
     } = props,
     reset = _objectWithoutPropertiesLoose(props, _excluded);
   var comps = _extends({}, components, {
+    countInfoExtra: reprops => /*#__PURE__*/_jsx(CountInfoExtra, _extends({}, reprops, {
+      editable: editable,
+      onAdd: onAdd
+    })),
     objectKey: reprops => /*#__PURE__*/_jsx(ObjectKey, _extends({}, reprops, {
@@ -21,0 +27,0 @@ editableValue: editable,

esm/editor/objectKey.d.ts

 import { FC } from 'react';
-import { SemicolonProps } from '../semicolon';
-import { JsonViewEditorProps } from './';
+import type { SemicolonProps } from '../semicolon';
+import type { JsonViewEditorProps } from './';
 export interface ObjectKeyProps<T extends object> extends SemicolonProps {
@@ -5,0 +5,0 @@ onEdit?: JsonViewEditorProps<T>['onEdit'];

esm/editor/value.d.ts

 /// <reference types="react" />
 import type { TypeProps } from '../value';
-import { JsonViewEditorProps } from './';
+import type { JsonViewEditorProps } from './';
 export interface ReValueProps<T extends object> extends React.HTMLAttributes<HTMLSpanElement> {
@@ -5,0 +5,0 @@ onEdit?: JsonViewEditorProps<T>['onEdit'];

esm/index.d.ts

 import React from 'react';
-import { SemicolonProps } from './semicolon';
-import { ValueViewProps } from './value';
-import { CopiedProps } from './copied';
-import { EllipsisProps } from './comps/ellipsis';
-import { MetaProps } from './comps/meta';
+import type { SemicolonProps } from './semicolon';
+import type { ValueViewProps } from './value';
+import type { CopiedProps } from './copied';
+import type { EllipsisProps } from './comps/ellipsis';
+import type { MetaProps } from './comps/meta';
+import type { CountInfoExtraProps } from './editor/countInfoExtra';
 export * from './node';
 export * from './value';
+export interface CountInfoProps {
+    count: number;
+    level: number;
+    visible: boolean;
+}
 export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
@@ -47,7 +53,4 @@ /** This property contains your input JSON */
         copied?: CopiedProps<T>['render'];
-        countInfo?: (props: {
-            count: number;
-            level: number;
-            visible: boolean;
-        }) => JSX.Element;
+        countInfo?: (props: CountInfoProps) => JSX.Element;
+        countInfoExtra?: (props: Omit<CountInfoExtraProps<T>, 'editable'>) => JSX.Element;
     };
@@ -54,0 +57,0 @@ }

esm/node.js

 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["value", "keyName", "className", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "highlightUpdates", "objectSortKeys", "indentWidth", "collapsed", "level", "keyid", "quotes", "onCopied", "onExpand"];
-import { Fragment, useId, cloneElement, useState } from 'react';
+import { Fragment, useId, cloneElement, useState, useEffect } from 'react';
 import { ValueView, Colon, Label, Line, typeMap } from './value';
@@ -9,3 +9,3 @@ import { TriangleArrow } from './arrow/TriangleArrow';
 import { Semicolon } from './semicolon';
-import { Tools } from './tools';
+import { Copied } from './copied';
 import { Ellipsis } from './comps/ellipsis';
@@ -106,6 +106,8 @@ import { Meta } from './comps/meta';
   }
-  var nameKeys = isArray ? Object.keys(value).map(m => Number(m)) : Object.keys(value);
+  var [valueData, setValueData] = useState(value);
+  useEffect(() => setValueData(value), [value]);
+  var nameKeys = isArray ? Object.keys(valueData).map(m => Number(m)) : Object.keys(valueData);
 
   // object
-  var entries = isArray ? Object.entries(value).map(m => [Number(m[0]), m[1]]) : Object.entries(value);
+  var entries = isArray ? Object.entries(valueData).map(m => [Number(m[0]), m[1]]) : Object.entries(valueData);
   if (objectSortKeys) {
@@ -143,3 +145,3 @@ entries = objectSortKeys === true ? entries.sort((_ref2, _ref3) => {
         children: [/*#__PURE__*/_jsx(Semicolon, {
-          value: value,
+          value: valueData,
           quotes: quotes,
@@ -165,8 +167,14 @@ "data-keys": keyid,
         render: components.braces
-      }), displayObjectSize && countInfo, /*#__PURE__*/_jsx(Tools, {
-        value: value,
-        enableClipboard: enableClipboard,
+      }), displayObjectSize && countInfo, components.countInfoExtra && components.countInfoExtra({
+        count: nameKeys.length,
+        level,
+        showTools,
+        visible: expand,
+        value: valueData,
+        setValue: setValueData
+      }), enableClipboard && /*#__PURE__*/_jsx(Copied, {
+        show: showTools,
+        text: valueData,
         onCopied: onCopied,
-        components: components,
-        showTools: showTools
+        render: components == null ? void 0 : components.copied
       })]
@@ -173,0 +181,0 @@ }), expand && /*#__PURE__*/_jsx(Line, {

esm/semicolon.d.ts

@@ -1,4 +0,4 @@
-import { FC, PropsWithChildren } from 'react';
-import { LabelProps } from './value';
-import { JsonViewProps } from './';
+import type { FC, PropsWithChildren } from 'react';
+import type { LabelProps } from './value';
+import type { JsonViewProps } from './';
 export declare function usePrevious<T>(value: T): T | undefined;
@@ -5,0 +5,0 @@ interface UseHighlight {

esm/value.d.ts

@@ -1,4 +0,4 @@
-import { FC, PropsWithChildren } from 'react';
-import { MetaProps } from './comps/meta';
-import { JsonViewProps } from './';
+import type { FC, PropsWithChildren } from 'react';
+import type { MetaProps } from './comps/meta';
+import type { JsonViewProps } from './';
 export declare const Line: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>>;
@@ -5,0 +5,0 @@ export declare const isFloat: (n: number) => boolean;

package.json

 {
   "name": "@uiw/react-json-view",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "JSON viewer for react.",
@@ -5,0 +5,0 @@ "main": "cjs/index.js",

README.md

@@ -6,3 +6,3 @@ react-json-view
 [![npm version](https://img.shields.io/npm/v/@uiw/react-json-view.svg)](https://www.npmjs.com/package/@uiw/react-json-view)
-[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-json-view.svg?style=flat&label=)](https://www.npmjs.com/package/@uiw/react-json-view) |
+[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-json-view.svg?style=flat&label=)](https://www.npmjs.com/package/@uiw/react-json-view)
 [![react@^18](https://shields.io/badge/react-^18-green?style=flat&logo=react)](https://github.com/facebook/react/releases)
@@ -320,7 +320,7 @@ [![Coverage Status](https://uiwjs.github.io/react-json-view/badges.svg)](https://uiwjs.github.io/react-json-view/lcov-report/)
 
-function value({ type, children, keyName, visible, ...props }) {
-  if (type === 'string' && /\.(jpg)$/.test(children)) {
+function value({ type, children, value, keyName, visible, ...props }) {
+  if (type === 'string' && /\.(jpg)$/.test(value)) {
     return (
       <span {...props}>
-        <img src={children} height="36" />
+        <img src={value} height="36" />
       </span>
@@ -677,2 +677,3 @@ );
 import { MetaProps, SemicolonProps, EllipsisProps, ValueViewProps } from '@uiw/react-json-view';
+import type { CountInfoExtraProps } from '@uiw/react-json-view/cjs/editor/countInfoExtra';
 export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
@@ -716,2 +717,4 @@ /** This property contains your input JSON */
     copied?: CopiedProps<T>['render'];
+    countInfo?: (props: CountInfoProps) => JSX.Element;
+    countInfoExtra?: (props: Omit<CountInfoExtraProps<T>, 'editable'>) => JSX.Element;
   };
@@ -721,2 +724,7 @@ }
 export default JsonView;
+export interface CountInfoProps {
+  count: number;
+  level: number;
+  visible: boolean;
+}
 ```
@@ -728,2 +736,3 @@
 import { JsonViewProps } from '@uiw/react-json-view';
+import type { CountInfoExtraProps } from '@uiw/react-json-view/cjs/editor/countInfoExtra';
 export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T> {
@@ -738,2 +747,7 @@ /** Callback when value edit functionality */
   }) => void;
+  /**
+   * When a callback function is passed in, add functionality is enabled. The callback is invoked before additions are completed.
+   * @returns {boolean} Returning false from onAdd will prevent the change from being made.
+   */
+  onAdd?: CountInfoExtraProps<T>['onAdd'];
   /** Whether enable edit feature. @default true */
@@ -750,15 +764,15 @@ editable?: boolean;
 
-| Library | Bundle size | Bundle size (gzip) | Deps | Last commit | Download |
+| Library | Bundle size (gzip) | Deps | Last commit | Download | Editable |
 | ------- | ------- | ------- | ------- | ------- | ------- |
-| **@uiw/react-json-view** | [![](https://img.shields.io/bundlephobia/min/@uiw/react-json-view?color=6ead0a&label=)](https://bundlephobia.com/result?p=@uiw/react-json-view)  | [![](https://img.shields.io/bundlephobia/minzip/@uiw/react-json-view?color=6ead0a&label=)](https://bundlephobia.com/result?p=@uiw/react-json-view)  | [![](https://badgen.net/bundlephobia/dependency-count/%40uiw%2Freact-json-view?color=6ead0a&label=)](https://bundlephobia.com/result?p=@uiw/react-json-view)  | [![GitHub last commit](https://img.shields.io/github/last-commit/uiwjs/react-json-view?style=flat&label=)](https://github.com/uiwjs/react-json-view/commits) | [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-json-view.svg?style=flat&label=)](https://www.npmjs.com/package/@uiw/react-json-view) |
-| react-json-view-lite | [![](https://img.shields.io/bundlephobia/min/react-json-view-lite?color=red&label=)](https://bundlephobia.com/result?p=react-json-view-lite)  | [![](https://img.shields.io/bundlephobia/minzip/react-json-view-lite?color=red&label=)](https://bundlephobia.com/result?p=react-json-view-lite)  | [![](https://badgen.net/bundlephobia/dependency-count/react-json-view-lite?color=red&label=)](https://bundlephobia.com/result?p=react-json-view-lite)  | [![GitHub last commit](https://img.shields.io/github/last-commit/AnyRoad/react-json-view-lite?style=flat&label=)](https://github.com/AnyRoad/react-json-view-lite/commits) | [![NPM Downloads](https://img.shields.io/npm/dm/react-json-view-lite.svg?style=flat&color=747474&label=)](https://www.npmjs.com/package/react-json-view-lite) |
-| react-json-pretty | [![](https://img.shields.io/bundlephobia/min/react-json-pretty?color=red&label=)](https://bundlephobia.com/result?p=react-json-pretty)  | [![](https://img.shields.io/bundlephobia/minzip/react-json-pretty?color=red&label=)](https://bundlephobia.com/result?p=react-json-pretty)  | [![](https://badgen.net/bundlephobia/dependency-count/react-json-pretty?color=red&label=)](https://bundlephobia.com/result?p=react-json-pretty)  | [![GitHub last commit](https://img.shields.io/github/last-commit/chenckang/react-json-pretty?style=flat&label=)](https://github.com/chenckang/react-json-pretty/commits) | [![NPM Downloads](https://img.shields.io/npm/dm/react-json-pretty.svg?style=flat&color=747474&label=)](https://www.npmjs.com/package/react-json-pretty) |
-| react-json-inspector | [![](https://img.shields.io/bundlephobia/min/react-json-inspector?color=red&label=)](https://bundlephobia.com/result?p=react-json-inspector)  | [![](https://img.shields.io/bundlephobia/minzip/react-json-inspector?color=red&label=)](https://bundlephobia.com/result?p=react-json-inspector)  | [![](https://badgen.net/bundlephobia/dependency-count/react-json-inspector?color=red&label=)](https://bundlephobia.com/result?p=react-json-inspector)  | [![GitHub last commit](https://img.shields.io/github/last-commit/Lapple/react-json-inspector?style=flat&label=)](https://github.com/Lapple/react-json-inspector/commits) | [![NPM Downloads](https://img.shields.io/npm/dm/react-json-inspector.svg?style=flat&color=747474&label=)](https://www.npmjs.com/package/react-json-inspector) |
-| react-json-tree | [![](https://img.shields.io/bundlephobia/min/react-json-tree?color=red&label=)](https://bundlephobia.com/result?p=react-json-tree)  | [![](https://img.shields.io/bundlephobia/minzip/react-json-tree?color=red&label=)](https://bundlephobia.com/result?p=react-json-tree)  | [![](https://badgen.net/bundlephobia/dependency-count/react-json-tree?color=red&label=)](https://bundlephobia.com/result?p=react-json-tree)  | [![GitHub last commit](https://img.shields.io/github/last-commit/reduxjs/redux-devtools?style=flat&label=)](https://github.com/reduxjs/redux-devtools/commits) | [![NPM Downloads](https://img.shields.io/npm/dm/react-json-tree.svg?style=flat&color=747474&label=)](https://www.npmjs.com/package/react-json-tree) |
-| react-json-view | [![](https://img.shields.io/bundlephobia/min/react-json-view?color=red&label=)](https://bundlephobia.com/result?p=react-json-view)  | [![](https://img.shields.io/bundlephobia/minzip/react-json-view?color=red&label=)](https://bundlephobia.com/result?p=react-json-view)  | [![](https://badgen.net/bundlephobia/dependency-count/react-json-view?color=red&label=&t=123)](https://bundlephobia.com/result?p=react-json-view)  | [![GitHub last commit](https://img.shields.io/github/last-commit/mac-s-g/react-json-view?style=flat&label=)](https://github.com/mac-s-g/react-json-view/commits) | [![NPM Downloads](https://img.shields.io/npm/dm/react-json-view.svg?style=flat&color=747474&label=)](https://www.npmjs.com/package/react-json-view) |
-| react-json-tree-viewer | [![](https://img.shields.io/bundlephobia/min/react-json-tree-viewer?color=red&label=)](https://bundlephobia.com/result?p=react-json-tree-viewer)  | [![](https://img.shields.io/bundlephobia/minzip/react-json-tree-viewer?color=red&label=)](https://bundlephobia.com/result?p=react-json-tree-viewer)  | [![](https://badgen.net/bundlephobia/dependency-count/react-json-tree-viewer?color=red&label=&t=123)](https://bundlephobia.com/result?p=react-json-tree-viewer)  | [![GitHub last commit](https://img.shields.io/github/last-commit/nsisodiya/react-json-viewer?style=flat&label=)](https://github.com/nsisodiya/react-json-viewer/commits) | [![NPM Downloads](https://img.shields.io/npm/dm/react-json-tree-viewer.svg?style=flat&color=747474&label=)](https://www.npmjs.com/package/react-json-tree-viewer) |
-| react-inspector | [![](https://img.shields.io/bundlephobia/min/react-inspector?color=red&label=)](https://bundlephobia.com/result?p=react-inspector)  | [![](https://img.shields.io/bundlephobia/minzip/react-inspector?color=red&label=)](https://bundlephobia.com/result?p=react-inspector)  | [![](https://badgen.net/bundlephobia/dependency-count/react-inspector?color=red&label=)](https://bundlephobia.com/result?p=react-inspector)  | [![GitHub last commit](https://img.shields.io/github/last-commit/storybookjs/react-inspector?style=flat&label=)](https://github.com/storybookjs/react-inspector/commits) | [![NPM Downloads](https://img.shields.io/npm/dm/react-inspector.svg?style=flat&color=747474&label=)](https://www.npmjs.com/package/react-inspector) |
-| react-domify | [![](https://img.shields.io/bundlephobia/min/react-domify?color=red&label=)](https://bundlephobia.com/result?p=react-domify)  | [![](https://img.shields.io/bundlephobia/minzip/react-domify?color=red&label=)](https://bundlephobia.com/result?p=react-domify)  | [![](https://badgen.net/bundlephobia/dependency-count/react-domify?color=red&label=)](https://bundlephobia.com/result?p=react-domify)  | [![GitHub last commit](https://img.shields.io/github/last-commit/JedWatson/react-domify?style=flat&label=)](https://github.com/JedWatson/react-domify/commits) | [![NPM Downloads](https://img.shields.io/npm/dm/react-domify.svg?style=flat&color=747474&label=)](https://www.npmjs.com/package/react-domify) |
-| react18-json-view | [![](https://img.shields.io/bundlephobia/min/react18-json-view?color=red&label=)](https://bundlephobia.com/result?p=react18-json-view)  | [![](https://img.shields.io/bundlephobia/minzip/react18-json-view?color=red&label=)](https://bundlephobia.com/result?p=react18-json-view)  | [![](https://badgen.net/bundlephobia/dependency-count/react18-json-view?color=red&label=)](https://bundlephobia.com/result?p=react18-json-view)  | [![GitHub last commit](https://img.shields.io/github/last-commit/YYsuni/react18-json-view?style=flat&label=)](https://github.com/YYsuni/react18-json-view/commits) | [![NPM Downloads](https://img.shields.io/npm/dm/react18-json-view.svg?style=flat&color=747474&label=)](https://www.npmjs.com/package/react18-json-view) |
-| @textea/json-viewer | [![](https://img.shields.io/bundlephobia/min/@textea/json-viewer?color=red&label=)](https://bundlephobia.com/result?p=@textea/json-viewer)  | [![](https://img.shields.io/bundlephobia/minzip/@textea/json-viewer?color=red&label=)](https://bundlephobia.com/result?p=@textea/json-viewer)  | [![](https://badgen.net/bundlephobia/dependency-count/%40textea%2Fjson-viewer?color=red&label=&t=vvv12213)](https://bundlephobia.com/result?p=@textea/json-viewer)  | [![GitHub last commit](https://img.shields.io/github/last-commit/TexteaInc/json-viewer?style=flat&label=)](https://github.com/TexteaInc/json-viewer/commits) | [![NPM Downloads](https://img.shields.io/npm/dm/@textea/json-viewer.svg?style=flat&color=747474&label=)](https://www.npmjs.com/package/@textea/json-viewer) |
+| **@uiw/react-json-view** | [![](https://img.shields.io/bundlephobia/min/@uiw/react-json-view?color=6ead0a&label=)](https://bundlephobia.com/result?p=@uiw/react-json-view) [![](https://img.shields.io/bundlephobia/minzip/@uiw/react-json-view?color=6ead0a&label=gzip)](https://bundlephobia.com/result?p=@uiw/react-json-view) | [![](https://badgen.net/bundlephobia/dependency-count/%40uiw%2Freact-json-view?color=6ead0a&label=)](https://bundlephobia.com/result?p=@uiw/react-json-view) | [![GitHub last commit](https://img.shields.io/github/last-commit/uiwjs/react-json-view?style=flat&label=)](https://github.com/uiwjs/react-json-view/commits) | [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-json-view.svg?style=flat&label=)](https://www.npmjs.com/package/@uiw/react-json-view) | ✅ |
+| react-json-view-lite | [![](https://img.shields.io/bundlephobia/min/react-json-view-lite?color=red&label=)](https://bundlephobia.com/result?p=react-json-view-lite) [![](https://img.shields.io/bundlephobia/minzip/react-json-view-lite?color=red&label=gzip)](https://bundlephobia.com/result?p=react-json-view-lite) | [![](https://badgen.net/bundlephobia/dependency-count/react-json-view-lite?color=red&label=)](https://bundlephobia.com/result?p=react-json-view-lite) | [![GitHub last commit](https://img.shields.io/github/last-commit/AnyRoad/react-json-view-lite?style=flat&label=)](https://github.com/AnyRoad/react-json-view-lite/commits) | [![NPM Downloads](https://img.shields.io/npm/dm/react-json-view-lite.svg?style=flat&color=747474&label=)](https://www.npmjs.com/package/react-json-view-lite) | ❌ |
+| react-json-pretty | [![](https://img.shields.io/bundlephobia/min/react-json-pretty?color=red&label=)](https://bundlephobia.com/result?p=react-json-pretty) [![](https://img.shields.io/bundlephobia/minzip/react-json-pretty?color=red&label=gzip)](https://bundlephobia.com/result?p=react-json-pretty) | [![](https://badgen.net/bundlephobia/dependency-count/react-json-pretty?color=red&label=)](https://bundlephobia.com/result?p=react-json-pretty) | [![GitHub last commit](https://img.shields.io/github/last-commit/chenckang/react-json-pretty?style=flat&label=)](https://github.com/chenckang/react-json-pretty/commits) | [![NPM Downloads](https://img.shields.io/npm/dm/react-json-pretty.svg?style=flat&color=747474&label=)](https://www.npmjs.com/package/react-json-pretty) | ❌ |
+| react-json-inspector | [![](https://img.shields.io/bundlephobia/min/react-json-inspector?color=red&label=)](https://bundlephobia.com/result?p=react-json-inspector) [![](https://img.shields.io/bundlephobia/minzip/react-json-inspector?color=red&label=gzip)](https://bundlephobia.com/result?p=react-json-inspector) | [![](https://badgen.net/bundlephobia/dependency-count/react-json-inspector?color=red&label=)](https://bundlephobia.com/result?p=react-json-inspector) | [![GitHub last commit](https://img.shields.io/github/last-commit/Lapple/react-json-inspector?style=flat&label=)](https://github.com/Lapple/react-json-inspector/commits) | [![NPM Downloads](https://img.shields.io/npm/dm/react-json-inspector.svg?style=flat&color=747474&label=)](https://www.npmjs.com/package/react-json-inspector) | ❌ |
+| react-json-tree | [![](https://img.shields.io/bundlephobia/min/react-json-tree?color=red&label=)](https://bundlephobia.com/result?p=react-json-tree) [![](https://img.shields.io/bundlephobia/minzip/react-json-tree?color=red&label=gzip)](https://bundlephobia.com/result?p=react-json-tree) | [![](https://badgen.net/bundlephobia/dependency-count/react-json-tree?color=red&label=)](https://bundlephobia.com/result?p=react-json-tree) | [![GitHub last commit](https://img.shields.io/github/last-commit/reduxjs/redux-devtools?style=flat&label=)](https://github.com/reduxjs/redux-devtools/commits) | [![NPM Downloads](https://img.shields.io/npm/dm/react-json-tree.svg?style=flat&color=747474&label=)](https://www.npmjs.com/package/react-json-tree) | ❌ |
+| ~~react-json-view~~ | [![](https://img.shields.io/bundlephobia/min/react-json-view?color=red&label=)](https://bundlephobia.com/result?p=react-json-view) [![](https://img.shields.io/bundlephobia/minzip/react-json-view?color=red&label=gzip)](https://bundlephobia.com/result?p=react-json-view) | [![](https://badgen.net/bundlephobia/dependency-count/react-json-view?color=red&label=&t=123)](https://bundlephobia.com/result?p=react-json-view) | [![GitHub last commit](https://img.shields.io/github/last-commit/mac-s-g/react-json-view?style=flat&label=)](https://github.com/mac-s-g/react-json-view/commits) | [![NPM Downloads](https://img.shields.io/npm/dm/react-json-view.svg?style=flat&color=747474&label=)](https://www.npmjs.com/package/react-json-view) | ✅ |
+| ~~react-json-tree-viewer~~ | [![](https://img.shields.io/bundlephobia/min/react-json-tree-viewer?color=red&label=)](https://bundlephobia.com/result?p=react-json-tree-viewer) [![](https://img.shields.io/bundlephobia/minzip/react-json-tree-viewer?color=red&label=gzip)](https://bundlephobia.com/result?p=react-json-tree-viewer) | [![](https://badgen.net/bundlephobia/dependency-count/react-json-tree-viewer?color=red&label=&t=123)](https://bundlephobia.com/result?p=react-json-tree-viewer) | [![GitHub last commit](https://img.shields.io/github/last-commit/nsisodiya/react-json-viewer?style=flat&label=)](https://github.com/nsisodiya/react-json-viewer/commits) | [![NPM Downloads](https://img.shields.io/npm/dm/react-json-tree-viewer.svg?style=flat&color=747474&label=)](https://www.npmjs.com/package/react-json-tree-viewer) | ❌ |
+| react-inspector | [![](https://img.shields.io/bundlephobia/min/react-inspector?color=red&label=)](https://bundlephobia.com/result?p=react-inspector) [![](https://img.shields.io/bundlephobia/minzip/react-inspector?color=red&label=gzip)](https://bundlephobia.com/result?p=react-inspector) | [![](https://badgen.net/bundlephobia/dependency-count/react-inspector?color=red&label=)](https://bundlephobia.com/result?p=react-inspector) | [![GitHub last commit](https://img.shields.io/github/last-commit/storybookjs/react-inspector?style=flat&label=)](https://github.com/storybookjs/react-inspector/commits) | [![NPM Downloads](https://img.shields.io/npm/dm/react-inspector.svg?style=flat&color=747474&label=)](https://www.npmjs.com/package/react-inspector) | ❌ |
+| react-domify | [![](https://img.shields.io/bundlephobia/min/react-domify?color=red&label=)](https://bundlephobia.com/result?p=react-domify) [![](https://img.shields.io/bundlephobia/minzip/react-domify?color=red&label=gzip)](https://bundlephobia.com/result?p=react-domify) | [![](https://badgen.net/bundlephobia/dependency-count/react-domify?color=red&label=)](https://bundlephobia.com/result?p=react-domify) | [![GitHub last commit](https://img.shields.io/github/last-commit/JedWatson/react-domify?style=flat&label=)](https://github.com/JedWatson/react-domify/commits) | [![NPM Downloads](https://img.shields.io/npm/dm/react-domify.svg?style=flat&color=747474&label=)](https://www.npmjs.com/package/react-domify) | ❌ |
+| react18-json-view | [![](https://img.shields.io/bundlephobia/min/react18-json-view?color=red&label=)](https://bundlephobia.com/result?p=react18-json-view) [![](https://img.shields.io/bundlephobia/minzip/react18-json-view?color=red&label=gzip)](https://bundlephobia.com/result?p=react18-json-view) | [![](https://badgen.net/bundlephobia/dependency-count/react18-json-view?color=red&label=)](https://bundlephobia.com/result?p=react18-json-view) | [![GitHub last commit](https://img.shields.io/github/last-commit/YYsuni/react18-json-view?style=flat&label=)](https://github.com/YYsuni/react18-json-view/commits) | [![NPM Downloads](https://img.shields.io/npm/dm/react18-json-view.svg?style=flat&color=747474&label=)](https://www.npmjs.com/package/react18-json-view) | ❌ |
+| @textea/json-viewer | [![](https://img.shields.io/bundlephobia/min/@textea/json-viewer?color=red&label=)](https://bundlephobia.com/result?p=@textea/json-viewer) [![](https://img.shields.io/bundlephobia/minzip/@textea/json-viewer?color=red&label=gzip)](https://bundlephobia.com/result?p=@textea/json-viewer) | [![](https://badgen.net/bundlephobia/dependency-count/%40textea%2Fjson-viewer?color=red&label=&t=vvv12213)](https://bundlephobia.com/result?p=@textea/json-viewer) | [![GitHub last commit](https://img.shields.io/github/last-commit/TexteaInc/json-viewer?style=flat&label=)](https://github.com/TexteaInc/json-viewer/commits) | [![NPM Downloads](https://img.shields.io/npm/dm/@textea/json-viewer.svg?style=flat&color=747474&label=)](https://www.npmjs.com/package/@textea/json-viewer) | ✅ |
 
@@ -765,0 +779,0 @@ ## Development

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

165888

increased by6.94%

Number of package files

79

increased by5.33%

Lines of code

3549

increased by5.69%

Number of lines in readme file

805

increased by1.77%

No dependency changes