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

Comparing version 0.1.0 to 1.0.0

cjs/index.d.ts

@@ -9,10 +9,13 @@ import React from 'react';
     value?: T;
-    /** Set the indent-width for nested objects @default `15`*/
+    /** Set the indent-width for nested objects @default 15 */
     indentWidth?: number;
-    /** When set to `true`, data type labels prefix values @default `true` */
+    /** When set to `true`, data type labels prefix values @default true */
     displayDataTypes?: boolean;
-    /** When set to `true`, `objects` and `arrays` are labeled with size @default `true` */
+    /** When set to `true`, `objects` and `arrays` are labeled with size @default true */
     displayObjectSize?: boolean;
-    /** Define the root node name. @default `undefined` */
+    /** Define the root node name. @default undefined */
     keyName?: string | number;
+    /** The user can copy objects and arrays to clipboard by clicking on the clipboard icon. @default true */
+    enableClipboard?: boolean;
+    /** Redefine interface elements to re-render. */
     components?: {
@@ -19,0 +22,0 @@ braces?: MetaProps['render'];

cjs/node.d.ts

@@ -10,3 +10,2 @@ import { FC, PropsWithChildren } from 'react';
 export declare function Meta(props: MetaProps): import("react/jsx-runtime").JSX.Element;
-export declare const Line: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>>;
 export interface EllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
@@ -13,0 +12,0 @@ render?: (props: EllipsisProps) => JSX.Element;

cjs/node.js

@@ -7,3 +7,3 @@ "use strict";
 });
-exports.Line = exports.Ellipsis = exports.CountInfo = void 0;
+exports.Ellipsis = exports.CountInfo = void 0;
 exports.Meta = Meta;
@@ -13,2 +13,3 @@ exports.RooNode = RooNode;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
@@ -20,2 +21,3 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _store = require("./store");
+var _copied = require("./copied");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -25,3 +27,3 @@ var _excluded = ["isArray", "start", "className", "render"],
   _excluded3 = ["children", "render", "color", "value", "className", "show"],
-  _excluded4 = ["value", "keyName", "displayDataTypes", "components", "displayObjectSize", "indentWidth", "keyid"];
+  _excluded4 = ["value", "keyName", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "indentWidth", "keyid"];
 function Meta(props) {
@@ -53,6 +55,2 @@ var _props$isArray = props.isArray,
 }
-var Line = function Line(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2["default"])({}, props));
-};
-exports.Line = Line;
 var Ellipsis = function Ellipsis(_ref) {
@@ -130,2 +128,4 @@ var style = _ref.style,
     displayObjectSize = _props$displayObjectS === void 0 ? true : _props$displayObjectS,
+    _props$enableClipboar = props.enableClipboard,
+    enableClipboard = _props$enableClipboar === void 0 ? true : _props$enableClipboar,
     _props$indentWidth = props.indentWidth,
@@ -161,2 +161,5 @@ indentWidth = _props$indentWidth === void 0 ? 15 : _props$indentWidth,
     displayDataTypes: displayDataTypes,
+    displayObjectSize: displayObjectSize,
+    enableClipboard: enableClipboard,
+    indentWidth: indentWidth,
     renderValue: components.value
@@ -170,4 +173,20 @@ };
   });
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    showTools = _useState2[0],
+    setShowTools = _useState2[1];
+  var tools = enableClipboard ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_copied.Copied, {
+    show: showTools,
+    text: value
+  }) : undefined;
+  var mouseEnter = function mouseEnter() {
+    return setShowTools(true);
+  };
+  var mouseLeave = function mouseLeave() {
+    return setShowTools(false);
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+    onMouseEnter: mouseEnter,
+    onMouseLeave: mouseLeave,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_value.Line, {
       style: {
@@ -197,6 +216,6 @@ display: 'inline-flex',
         children: [nameKeys.length, " items"]
-      })]
-    }), expand && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+      }), tools]
+    }), expand && /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Line, {
       style: {
-        borderLeft: 'var(--w-rjv-border-left, 1px solid #ebebeb)',
+        borderLeft: '1px solid var(--w-rjv-line-color, #ebebeb)',
         marginLeft: 6
@@ -206,5 +225,13 @@ },
         var item = value[key];
-        if (Array.isArray(item)) {
+        var renderKey = /*#__PURE__*/(0, _jsxRuntime.jsx)(Semicolon, {
+          value: item,
+          render: components.objectKey,
+          color: typeof key === 'number' ? _value.typeMap['number'].color : '',
+          show: typeof key === 'string',
+          children: key
+        });
+        var isEmpty = Array.isArray(item) && item.length === 0 || (0, _typeof2["default"])(item) === 'object' && item && !(item instanceof Date) && Object.keys(item).length === 0;
+        if (Array.isArray(item) && !isEmpty) {
           var label = isArray ? idx : key;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Line, {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RooNode, (0, _objectSpread2["default"])({
@@ -217,32 +244,4 @@ value: item,
         }
-        var renderKey = /*#__PURE__*/(0, _jsxRuntime.jsx)(Semicolon, {
-          value: item,
-          render: components.objectKey,
-          color: typeof key === 'number' ? _value.typeMap['number'].color : '',
-          show: typeof key === 'string',
-          children: key
-        });
-        if ((0, _typeof2["default"])(item) === 'object' && item && !(item instanceof Date)) {
-          if (Object.keys(item).length === 0) {
-            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
-              style: {
-                paddingLeft: indentWidth
-              },
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_value.ValueView, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, valueViewProps), {}, {
-                renderKey: renderKey,
-                keyName: key,
-                value: item
-              })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Meta, {
-                render: components.braces,
-                start: true,
-                isArray: isArray
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Meta, {
-                render: components.braces,
-                isArray: isArray
-              }), displayObjectSize && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CountInfo, {
-                children: [Object.keys(item).length, " items"]
-              })]
-            }, key + idx);
-          }
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+        if ((0, _typeof2["default"])(item) === 'object' && item && !(item instanceof Date) && !isEmpty) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Line, {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RooNode, (0, _objectSpread2["default"])({
@@ -258,14 +257,10 @@ keyid: keyid + subkeyid + key,
         }
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
-          style: {
-            paddingLeft: indentWidth
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.ValueView, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, valueViewProps), {}, {
-            renderKey: renderKey,
-            keyName: key,
-            value: item
-          }))
-        }, idx);
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.ValueView, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, valueViewProps), {}, {
+          renderBraces: components.braces,
+          renderKey: renderKey,
+          keyName: key,
+          value: item
+        }), idx);
       })
-    }), expand && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+    }), expand && /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Line, {
       style: {
@@ -272,0 +267,0 @@ paddingLeft: 2

cjs/theme/dark.d.ts

@@ -5,5 +5,7 @@ export declare const darkTheme: {
     '--w-rjv-background-color': string;
-    '--w-rjv-border-left': string;
+    '--w-rjv-line-color': string;
     '--w-rjv-arrow-color': string;
     '--w-rjv-info-color': string;
+    '--w-rjv-copied-color': string;
+    '--w-rjv-copied-success-color': string;
     '--w-rjv-curlybraces-color': string;
@@ -10,0 +12,0 @@ '--w-rjv-brackets-color': string;

cjs/theme/dark.js

@@ -11,5 +11,7 @@ "use strict";
   '--w-rjv-background-color': '#202020',
-  '--w-rjv-border-left': '1px solid #323232',
+  '--w-rjv-line-color': '#323232',
   '--w-rjv-arrow-color': 'var(--w-rjv-color)',
   '--w-rjv-info-color': '#656565',
+  '--w-rjv-copied-color': '#0184a6',
+  '--w-rjv-copied-success-color': '#28a745',
   '--w-rjv-curlybraces-color': '#1896b6',
@@ -16,0 +18,0 @@ '--w-rjv-brackets-color': '#1896b6',

cjs/theme/light.d.ts

@@ -5,5 +5,7 @@ export declare const lightTheme: {
     '--w-rjv-background-color': string;
-    '--w-rjv-border-left': string;
+    '--w-rjv-line-color': string;
     '--w-rjv-arrow-color': string;
     '--w-rjv-info-color': string;
+    '--w-rjv-copied-color': string;
+    '--w-rjv-copied-success-color': string;
     '--w-rjv-curlybraces-color': string;
@@ -10,0 +12,0 @@ '--w-rjv-brackets-color': string;

cjs/theme/light.js

@@ -11,5 +11,7 @@ "use strict";
   '--w-rjv-background-color': '#ffffff',
-  '--w-rjv-border-left': '1px solid #ebebeb',
+  '--w-rjv-line-color': '#ebebeb',
   '--w-rjv-arrow-color': 'var(--w-rjv-color)',
   '--w-rjv-info-color': '#0000004d',
+  '--w-rjv-copied-color': '#002b36',
+  '--w-rjv-copied-success-color': '#28a745',
   '--w-rjv-curlybraces-color': '#236a7c',
@@ -16,0 +18,0 @@ '--w-rjv-brackets-color': '#236a7c',

cjs/value.d.ts

 import { FC, PropsWithChildren } from 'react';
+import { MetaProps } from './node';
+export declare const Line: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>>;
 export declare const typeMap: {
@@ -43,5 +45,9 @@ string: {
     keyName?: string;
-    value: T;
+    value?: T;
     displayDataTypes: boolean;
+    displayObjectSize: boolean;
+    enableClipboard: boolean;
+    indentWidth: number;
     renderKey?: JSX.Element;
+    renderBraces?: MetaProps['render'];
     renderValue?: (props: React.HTMLAttributes<HTMLSpanElement> & {
@@ -51,3 +57,3 @@ type: TypeProps['type'];
 }
-export declare function ValueView<T>(props: ValueViewProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ValueView<T = object>(props: ValueViewProps<T>): import("react/jsx-runtime").JSX.Element;
 export interface LabelProps extends React.HTMLAttributes<HTMLSpanElement> {
@@ -54,0 +60,0 @@ color?: string;

cjs/value.js

@@ -7,13 +7,20 @@ "use strict";
 });
-exports.Type = exports.Label = exports.Colon = void 0;
+exports.Type = exports.Line = exports.Label = exports.Colon = void 0;
 exports.ValueView = ValueView;
 exports.typeMap = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
+var _node = require("./node");
+var _copied = require("./copied");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["children", "style"],
-  _excluded2 = ["value", "keyName", "renderKey", "renderValue", "displayDataTypes"],
+  _excluded2 = ["value", "keyName", "indentWidth", "renderKey", "renderValue", "renderBraces", "enableClipboard", "displayObjectSize", "displayDataTypes"],
   _excluded3 = ["children", "color", "fontSize", "opacity", "paddingRight", "style"];
+var Line = function Line(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2["default"])({}, props));
+};
+exports.Line = Line;
 var isFloat = function isFloat(n) {
@@ -80,4 +87,8 @@ return Number(n) === n && n % 1 !== 0 || isNaN(n);
     keyName = props.keyName,
+    indentWidth = props.indentWidth,
     renderKey = props.renderKey,
     renderValue = props.renderValue,
+    renderBraces = props.renderBraces,
+    enableClipboard = props.enableClipboard,
+    displayObjectSize = props.displayObjectSize,
     displayDataTypes = props.displayDataTypes,
@@ -128,2 +139,16 @@ reset = (0, _objectWithoutProperties2["default"])(props, _excluded2);
   color = ((_typeMap$type = typeMap[type]) === null || _typeMap$type === void 0 ? void 0 : _typeMap$type.color) || '';
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    showTools = _useState2[0],
+    setShowTools = _useState2[1];
+  var tools = enableClipboard ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_copied.Copied, {
+    show: showTools,
+    text: value
+  }) : undefined;
+  var mouseEnter = function mouseEnter() {
+    return setShowTools(true);
+  };
+  var mouseLeave = function mouseLeave() {
+    return setShowTools(false);
+  };
   if (content && typeof content === 'string') {
@@ -143,9 +168,36 @@ var valueView = renderValue ? renderValue({
     });
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
-      children: [renderKey, /*#__PURE__*/(0, _jsxRuntime.jsx)(Colon, {}), typeView, valueView]
-    }));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+      style: {
+        paddingLeft: indentWidth
+      },
+      onMouseEnter: mouseEnter,
+      onMouseLeave: mouseLeave,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+        children: [renderKey, /*#__PURE__*/(0, _jsxRuntime.jsx)(Colon, {}), typeView, valueView, tools]
+      }))
+    });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
-    children: [renderKey, /*#__PURE__*/(0, _jsxRuntime.jsx)(Colon, {}), typeView]
-  }));
+  var length = Array.isArray(value) ? value.length : Object.keys(value).length;
+  var empty = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_node.Meta, {
+      render: renderBraces,
+      start: true,
+      isArray: Array.isArray(value)
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_node.Meta, {
+      render: renderBraces,
+      isArray: Array.isArray(value)
+    }), displayObjectSize && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_node.CountInfo, {
+      children: [length, " items"]
+    })]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+    style: {
+      paddingLeft: indentWidth
+    },
+    onMouseEnter: mouseEnter,
+    onMouseLeave: mouseLeave,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+      children: [renderKey, /*#__PURE__*/(0, _jsxRuntime.jsx)(Colon, {}), typeView, empty, tools]
+    }))
+  });
 }
@@ -152,0 +204,0 @@ var Label = function Label(_ref2) {

esm/index.d.ts

@@ -9,10 +9,13 @@ import React from 'react';
     value?: T;
-    /** Set the indent-width for nested objects @default `15`*/
+    /** Set the indent-width for nested objects @default 15 */
     indentWidth?: number;
-    /** When set to `true`, data type labels prefix values @default `true` */
+    /** When set to `true`, data type labels prefix values @default true */
     displayDataTypes?: boolean;
-    /** When set to `true`, `objects` and `arrays` are labeled with size @default `true` */
+    /** When set to `true`, `objects` and `arrays` are labeled with size @default true */
     displayObjectSize?: boolean;
-    /** Define the root node name. @default `undefined` */
+    /** Define the root node name. @default undefined */
     keyName?: string | number;
+    /** The user can copy objects and arrays to clipboard by clicking on the clipboard icon. @default true */
+    enableClipboard?: boolean;
+    /** Redefine interface elements to re-render. */
     components?: {
@@ -19,0 +22,0 @@ braces?: MetaProps['render'];

esm/node.d.ts

@@ -10,3 +10,2 @@ import { FC, PropsWithChildren } from 'react';
 export declare function Meta(props: MetaProps): import("react/jsx-runtime").JSX.Element;
-export declare const Line: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>>;
 export interface EllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
@@ -13,0 +12,0 @@ render?: (props: EllipsisProps) => JSX.Element;

esm/node.js

@@ -6,7 +6,8 @@ import _extends from "@babel/runtime/helpers/extends";
   _excluded3 = ["children", "render", "color", "value", "className", "show"],
-  _excluded4 = ["value", "keyName", "displayDataTypes", "components", "displayObjectSize", "indentWidth", "keyid"];
-import { Fragment, useId, cloneElement } from 'react';
-import { ValueView, Colon, Label, typeMap } from './value';
+  _excluded4 = ["value", "keyName", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "indentWidth", "keyid"];
+import { Fragment, useId, cloneElement, useState } from 'react';
+import { ValueView, Colon, Label, Line, typeMap } from './value';
 import { TriangleArrow } from './arrow/TriangleArrow';
 import { useExpandsStatus, store } from './store';
+import { Copied } from './copied';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -40,3 +41,2 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 }
-export var Line = props => /*#__PURE__*/_jsx("div", _extends({}, props));
 export var Ellipsis = _ref => {
@@ -113,2 +113,3 @@ var {
       displayObjectSize = true,
+      enableClipboard = true,
       indentWidth = 15,
@@ -141,2 +142,5 @@ keyid = 'root'
     displayDataTypes,
+    displayObjectSize,
+    enableClipboard,
+    indentWidth,
     renderValue: components.value
@@ -150,3 +154,12 @@ };
   });
+  var [showTools, setShowTools] = useState(false);
+  var tools = enableClipboard ? /*#__PURE__*/_jsx(Copied, {
+    show: showTools,
+    text: value
+  }) : undefined;
+  var mouseEnter = () => setShowTools(true);
+  var mouseLeave = () => setShowTools(false);
   return /*#__PURE__*/_jsxs("div", _extends({}, reset, {
+    onMouseEnter: mouseEnter,
+    onMouseLeave: mouseLeave,
     children: [/*#__PURE__*/_jsxs(Line, {
@@ -177,6 +190,6 @@ style: {
         children: [nameKeys.length, " items"]
-      })]
+      }), tools]
     }), expand && /*#__PURE__*/_jsx(Line, {
       style: {
-        borderLeft: 'var(--w-rjv-border-left, 1px solid #ebebeb)',
+        borderLeft: '1px solid var(--w-rjv-line-color, #ebebeb)',
         marginLeft: 6
@@ -186,3 +199,11 @@ },
         var item = value[key];
-        if (Array.isArray(item)) {
+        var renderKey = /*#__PURE__*/_jsx(Semicolon, {
+          value: item,
+          render: components.objectKey,
+          color: typeof key === 'number' ? typeMap['number'].color : '',
+          show: typeof key === 'string',
+          children: key
+        });
+        var isEmpty = Array.isArray(item) && item.length === 0 || typeof item === 'object' && item && !(item instanceof Date) && Object.keys(item).length === 0;
+        if (Array.isArray(item) && !isEmpty) {
           var label = isArray ? idx : key;
@@ -197,31 +218,3 @@ return /*#__PURE__*/_jsx(Line, {
         }
-        var renderKey = /*#__PURE__*/_jsx(Semicolon, {
-          value: item,
-          render: components.objectKey,
-          color: typeof key === 'number' ? typeMap['number'].color : '',
-          show: typeof key === 'string',
-          children: key
-        });
-        if (typeof item === 'object' && item && !(item instanceof Date)) {
-          if (Object.keys(item).length === 0) {
-            return /*#__PURE__*/_jsxs(Line, {
-              style: {
-                paddingLeft: indentWidth
-              },
-              children: [/*#__PURE__*/_jsx(ValueView, _extends({}, valueViewProps, {
-                renderKey: renderKey,
-                keyName: key,
-                value: item
-              })), /*#__PURE__*/_jsx(Meta, {
-                render: components.braces,
-                start: true,
-                isArray: isArray
-              }), /*#__PURE__*/_jsx(Meta, {
-                render: components.braces,
-                isArray: isArray
-              }), displayObjectSize && /*#__PURE__*/_jsxs(CountInfo, {
-                children: [Object.keys(item).length, " items"]
-              })]
-            }, key + idx);
-          }
+        if (typeof item === 'object' && item && !(item instanceof Date) && !isEmpty) {
           return /*#__PURE__*/_jsx(Line, {
@@ -238,12 +231,8 @@ children: /*#__PURE__*/_jsx(RooNode, _extends({
         }
-        return /*#__PURE__*/_jsx(Line, {
-          style: {
-            paddingLeft: indentWidth
-          },
-          children: /*#__PURE__*/_jsx(ValueView, _extends({}, valueViewProps, {
-            renderKey: renderKey,
-            keyName: key,
-            value: item
-          }))
-        }, idx);
+        return /*#__PURE__*/_jsx(ValueView, _extends({}, valueViewProps, {
+          renderBraces: components.braces,
+          renderKey: renderKey,
+          keyName: key,
+          value: item
+        }), idx);
       })
@@ -250,0 +239,0 @@ }), expand && /*#__PURE__*/_jsx(Line, {

esm/theme/dark.d.ts

@@ -5,5 +5,7 @@ export declare const darkTheme: {
     '--w-rjv-background-color': string;
-    '--w-rjv-border-left': string;
+    '--w-rjv-line-color': string;
     '--w-rjv-arrow-color': string;
     '--w-rjv-info-color': string;
+    '--w-rjv-copied-color': string;
+    '--w-rjv-copied-success-color': string;
     '--w-rjv-curlybraces-color': string;
@@ -10,0 +12,0 @@ '--w-rjv-brackets-color': string;

esm/theme/dark.js

@@ -5,5 +5,7 @@ export var darkTheme = {
   '--w-rjv-background-color': '#202020',
-  '--w-rjv-border-left': '1px solid #323232',
+  '--w-rjv-line-color': '#323232',
   '--w-rjv-arrow-color': 'var(--w-rjv-color)',
   '--w-rjv-info-color': '#656565',
+  '--w-rjv-copied-color': '#0184a6',
+  '--w-rjv-copied-success-color': '#28a745',
   '--w-rjv-curlybraces-color': '#1896b6',
@@ -10,0 +12,0 @@ '--w-rjv-brackets-color': '#1896b6',

esm/theme/light.d.ts

@@ -5,5 +5,7 @@ export declare const lightTheme: {
     '--w-rjv-background-color': string;
-    '--w-rjv-border-left': string;
+    '--w-rjv-line-color': string;
     '--w-rjv-arrow-color': string;
     '--w-rjv-info-color': string;
+    '--w-rjv-copied-color': string;
+    '--w-rjv-copied-success-color': string;
     '--w-rjv-curlybraces-color': string;
@@ -10,0 +12,0 @@ '--w-rjv-brackets-color': string;

esm/theme/light.js

@@ -5,5 +5,7 @@ export var lightTheme = {
   '--w-rjv-background-color': '#ffffff',
-  '--w-rjv-border-left': '1px solid #ebebeb',
+  '--w-rjv-line-color': '#ebebeb',
   '--w-rjv-arrow-color': 'var(--w-rjv-color)',
   '--w-rjv-info-color': '#0000004d',
+  '--w-rjv-copied-color': '#002b36',
+  '--w-rjv-copied-success-color': '#28a745',
   '--w-rjv-curlybraces-color': '#236a7c',
@@ -10,0 +12,0 @@ '--w-rjv-brackets-color': '#236a7c',

esm/value.d.ts

 import { FC, PropsWithChildren } from 'react';
+import { MetaProps } from './node';
+export declare const Line: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>>;
 export declare const typeMap: {
@@ -43,5 +45,9 @@ string: {
     keyName?: string;
-    value: T;
+    value?: T;
     displayDataTypes: boolean;
+    displayObjectSize: boolean;
+    enableClipboard: boolean;
+    indentWidth: number;
     renderKey?: JSX.Element;
+    renderBraces?: MetaProps['render'];
     renderValue?: (props: React.HTMLAttributes<HTMLSpanElement> & {
@@ -51,3 +57,3 @@ type: TypeProps['type'];
 }
-export declare function ValueView<T>(props: ValueViewProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ValueView<T = object>(props: ValueViewProps<T>): import("react/jsx-runtime").JSX.Element;
 export interface LabelProps extends React.HTMLAttributes<HTMLSpanElement> {
@@ -54,0 +60,0 @@ color?: string;

esm/value.js

@@ -0,9 +1,12 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["children", "style"],
-  _excluded2 = ["value", "keyName", "renderKey", "renderValue", "displayDataTypes"],
+  _excluded2 = ["value", "keyName", "indentWidth", "renderKey", "renderValue", "renderBraces", "enableClipboard", "displayObjectSize", "displayDataTypes"],
   _excluded3 = ["children", "color", "fontSize", "opacity", "paddingRight", "style"];
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
+import { Meta, CountInfo } from './node';
+import { Copied } from './copied';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+export var Line = props => /*#__PURE__*/_jsx("div", _extends({}, props));
 var isFloat = n => Number(n) === n && n % 1 !== 0 || isNaN(n);
@@ -67,4 +70,8 @@ export var typeMap = {
       value,
+      indentWidth,
       renderKey,
       renderValue,
+      renderBraces,
+      enableClipboard,
+      displayObjectSize,
       displayDataTypes
@@ -116,2 +123,9 @@ } = props,
   color = ((_typeMap$type = typeMap[type]) == null ? void 0 : _typeMap$type.color) || '';
+  var [showTools, setShowTools] = useState(false);
+  var tools = enableClipboard ? /*#__PURE__*/_jsx(Copied, {
+    show: showTools,
+    text: value
+  }) : undefined;
+  var mouseEnter = () => setShowTools(true);
+  var mouseLeave = () => setShowTools(false);
   if (content && typeof content === 'string') {
@@ -131,9 +145,36 @@ var valueView = renderValue ? renderValue({
     });
-    return /*#__PURE__*/_jsxs(Label, _extends({}, reset, {
-      children: [renderKey, /*#__PURE__*/_jsx(Colon, {}), typeView, valueView]
-    }));
+    return /*#__PURE__*/_jsx(Line, {
+      style: {
+        paddingLeft: indentWidth
+      },
+      onMouseEnter: mouseEnter,
+      onMouseLeave: mouseLeave,
+      children: /*#__PURE__*/_jsxs(Label, _extends({}, reset, {
+        children: [renderKey, /*#__PURE__*/_jsx(Colon, {}), typeView, valueView, tools]
+      }))
+    });
   }
-  return /*#__PURE__*/_jsxs(Label, _extends({}, reset, {
-    children: [renderKey, /*#__PURE__*/_jsx(Colon, {}), typeView]
-  }));
+  var length = Array.isArray(value) ? value.length : Object.keys(value).length;
+  var empty = /*#__PURE__*/_jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx(Meta, {
+      render: renderBraces,
+      start: true,
+      isArray: Array.isArray(value)
+    }), /*#__PURE__*/_jsx(Meta, {
+      render: renderBraces,
+      isArray: Array.isArray(value)
+    }), displayObjectSize && /*#__PURE__*/_jsxs(CountInfo, {
+      children: [length, " items"]
+    })]
+  });
+  return /*#__PURE__*/_jsx(Line, {
+    style: {
+      paddingLeft: indentWidth
+    },
+    onMouseEnter: mouseEnter,
+    onMouseLeave: mouseLeave,
+    children: /*#__PURE__*/_jsxs(Label, _extends({}, reset, {
+      children: [renderKey, /*#__PURE__*/_jsx(Colon, {}), typeView, empty, tools]
+    }))
+  });
 }
@@ -140,0 +181,0 @@ export var Label = _ref2 => {

package.json

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

README.md

@@ -6,2 +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)
+[![react@^18](https://shields.io/badge/react-^18-green?style=flat&logo=react)](https://github.com/facebook/react/releases)
 
@@ -110,5 +111,7 @@ A React component for displaying and editing javascript arrays and JSON objects.
   '--w-rjv-background-color': '#1e1e1e',
-  '--w-rjv-border-left': '1px solid #323232',
+  '--w-rjv-line-color': '#323232',
   '--w-rjv-arrow-color': 'var(--w-rjv-color)',
   '--w-rjv-info-color': '#656565',
+  '--w-rjv-copied-color': '#9cdcfe',
+  '--w-rjv-copied-success-color': '#28a745',
 
@@ -140,3 +143,3 @@ '--w-rjv-curlybraces-color': '#d4d4d4',
 
-```tsx mdx:preview
+```tsx mdx:preview:&title=Online Editing Theme
 import React, { useState, useRef } from 'react';
@@ -171,5 +174,7 @@ import Colorful from '@uiw/react-color-colorful';
   '--w-rjv-background-color': '#1e1e1e',
-  '--w-rjv-border-left': '1px solid #323232',
-  '--w-rjv-arrow-color': 'var(--w-rjv-color)',
+  '--w-rjv-line-color': '#323232',
+  '--w-rjv-arrow-color': '#9cdcfe',
   '--w-rjv-info-color': '#656565',
+  '--w-rjv-copied-color': '#0184a6',
+  '--w-rjv-copied-success-color': '#28a745',
 
@@ -195,5 +200,4 @@ '--w-rjv-curlybraces-color': '#d4d4d4',
   const onChange = ({ hexa }) => {
-    const value = cssvar === '--w-rjv-border-left' ? `1px solid ${hexa}` : hexa;
     setHex(hexa);
-    setTheme({ ...theme, [cssvar]: value });
+    setTheme({ ...theme, [cssvar]: hexa });
   };
@@ -208,3 +212,6 @@ return (
             {Object.keys(customTheme).map((varname, idx) => {
-              const click = () => setCssvar(varname);
+              const click = () => {
+                setCssvar(varname);
+                setHex(customTheme[varname]);
+              };
               const active = cssvar === varname ? '#a8a8a8' : '';
@@ -384,10 +391,13 @@ return <button key={idx} style={{ background: active }} onClick={click}>{varname}</button>
   value?: T;
-  /** Set the indent-width for nested objects @default `15`*/
+  /** Set the indent-width for nested objects @default 15 */
   indentWidth?: number;
-  /** When set to `true`, data type labels prefix values @default `true` */
+  /** When set to `true`, data type labels prefix values @default true */
   displayDataTypes?: boolean;
-  /** When set to `true`, `objects` and `arrays` are labeled with size @default `true` */
+  /** When set to `true`, `objects` and `arrays` are labeled with size @default true */
   displayObjectSize?: boolean;
-  /** Define the root node name. @default `undefined` */
+  /** Define the root node name. @default undefined */
   keyName?: string | number;
+  /** The user can copy objects and arrays to clipboard by clicking on the clipboard icon. @default true */
+  enableClipboard?: boolean;
+  /** Redefine interface elements to re-render. */
   components?: {
@@ -394,0 +404,0 @@ braces?: MetaProps['render'];

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

82121

increased by18.12%

Number of package files

42

increased by10.53%

Lines of code

1886

increased by15.92%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

442

increased by2.31%

No dependency changes