@uiw/react-json-view 1.1.0 → 1.2.0

package/README.md

@@ -249,7 +249,7 @@ export default function Demo() {
       displayDataTypes={false}
       style={{
         '--w-rjv-background-color': '#ffffff',
-        '--w-rjv-border-left': '0',
+        '--w-rjv-border-left-width': '0',
       }}
       components={{
         braces: () =>  <span />,
@@ -266,6 +266,45 @@ export default function Demo() {
 }
 ```
 
+**Preview Picture**
+
+```tsx mdx:preview
+import React from 'react';
+import JsonView from '@uiw/react-json-view';
+
+const object = {
+  avatar: 'https://i.imgur.com/MK3eW3As.jpg',
+  string: 'Lorem ipsum dolor sit amet',
+  integer: 42,
+}
+
+function value({ type, children, ...props }) {
+  if (type === 'string' && /\.(jpg)$/.test(children)) {
+    return (
+      <span {...props}>
+        <img src={children} height="36" />
+      </span>
+    );
+  }
+}
+
+export default function Demo() {
+  return (
+    <JsonView
+      value={object}
+      keyName="root"
+      // quotes=""
+      displayObjectSize={false}
+      displayDataTypes={false}
+      style={{
+        '--w-rjv-background-color': '#ffffff',
+      }}
+      components={{ value }}
+    />
+  )
+}
+```
+
 ## Modify Icon Style
 
 Use built-in default icons.
@@ -329,34 +368,25 @@ const object = {
 }
 
 const Arrow = (props) => {
-  const { style, 'data-expand': expand,  ...reset } = props;
-  const defaultStyle = {
-    cursor: 'pointer',
-    height: '1em',
-    width: '1em',
-  };
+  const { style, 'data-expand': expand, ...reset } = props;
+  const svgProps = {
+    style: { cursor: 'pointer', height: '1em', width: '1em' },
+    viewBox: '0 0 24 24',
+    fill: 'var(--w-rjv-arrow-color, currentColor)',
+    ...reset
+  }
   if (!expand) {
     return (
-      <svg
-        viewBox="0 0 24 24"
-        fill="var(--w-rjv-arrow-color, currentColor)"
-        style={defaultStyle}
-        {...reset}
-      >
+      <svg {...svgProps}>
         <path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z" />
       </svg>
-    )
+    );
   }
   return (
-    <svg
-      viewBox="0 0 24 24"
-      fill="var(--w-rjv-arrow-color, currentColor)"
-      style={defaultStyle}
-      {...reset}
-    >
+    <svg {...svgProps}>
       <path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M7,13H17V11H7" />
     </svg>
-  )
+  );
 }
 
 export default function Demo() {
@@ -396,6 +426,8 @@ export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttr
   enableClipboard?: boolean;
   /** Display for quotes in object-key @default " */
   quotes?: "'" | '"' | '';
+  /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. @default false */
+  collapsed?: boolean | number;
   /** Callback function for when a treeNode is expanded or collapsed */
   onExpand?: (props: {
     expand: boolean;
@@ -431,6 +463,7 @@ Here is the size benchmark (using [bundlephobia.com](https://bundlephobia.com))
 | 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=last)](https://github.com/nsisodiya/react-json-viewer/commits) |
 | 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=last)](https://github.com/JedWatson/react-domify/commits) |
 | 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=last)](https://github.com/YYsuni/react18-json-view/commits) |
+| @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=last)](https://github.com/TexteaInc/json-viewer/commits) |
 
 ## Development
 

package/cjs/copied.d.ts

@@ -2,6 +2,7 @@
 export interface CopiedProps<T = object> extends React.SVGProps<SVGSVGElement> {
     show?: boolean;
     text?: T;
+    onCopied?: (text: string, obj: T) => void;
     render?: (props: Omit<CopiedProps<T>, 'render'>) => JSX.Element;
 }
 export declare function Copied<T>(props: CopiedProps<T>): JSX.Element | null;

package/cjs/index.d.ts

@@ -28,6 +28,8 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
         keyid: string;
         keyName?: string | number;
     }) => void;
+    /** Fires event when you copy */
+    onCopied?: CopiedProps<T>['onCopied'];
     /** Redefine interface elements to re-render. */
     components?: {
         braces?: MetaProps['render'];

package/cjs/node.js

@@ -21,7 +21,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["isArray", "start", "className", "render"],
   _excluded2 = ["style", "render"],
   _excluded3 = ["children", "render", "color", "value", "className", "show", "quotes"],
-  _excluded4 = ["value", "keyName", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "indentWidth", "collapsed", "level", "keyid", "quotes", "onExpand"];
+  _excluded4 = ["value", "keyName", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "indentWidth", "collapsed", "level", "keyid", "quotes", "onCopied", "onExpand"];
 function Meta(props) {
   var _props$isArray = props.isArray,
     isArray = _props$isArray === void 0 ? false : _props$isArray,
@@ -105,7 +105,7 @@ var CountInfo = function CountInfo(_ref3) {
       fontStyle: 'italic'
     },
     color: "var(--w-rjv-info-color, #0000004d)",
-    className: "object-size",
+    className: "w-rjv-object-size",
     children: children
   });
 };
@@ -132,6 +132,7 @@ function RooNode(props) {
     keyid = _props$keyid === void 0 ? 'root' : _props$keyid,
     _props$quotes = props.quotes,
     quotes = _props$quotes === void 0 ? '"' : _props$quotes,
+    onCopied = props.onCopied,
     onExpand = props.onExpand,
     reset = (0, _objectWithoutProperties2["default"])(props, _excluded4);
   var isArray = Array.isArray(value);
@@ -160,6 +161,7 @@ function RooNode(props) {
     displayDataTypes: displayDataTypes,
     displayObjectSize: displayObjectSize,
     enableClipboard: enableClipboard,
+    onCopied: onCopied,
     onExpand: onExpand,
     collapsed: collapsed,
     quotes: quotes,
@@ -173,13 +175,16 @@ function RooNode(props) {
     displayObjectSize: displayObjectSize,
     enableClipboard: enableClipboard,
     indentWidth: indentWidth,
+    renderBraces: components.braces,
     renderValue: components.value
   };
   var arrowView = components.arrow ? /*#__PURE__*/(0, _react.cloneElement)(components.arrow, {
     style: arrowStyle,
-    'data-expand': expand
+    'data-expand': expand,
+    className: "w-rjv-arrow"
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_TriangleArrow.TriangleArrow, {
-    style: arrowStyle
+    style: arrowStyle,
+    className: "w-rjv-arrow"
   });
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -188,6 +193,7 @@ function RooNode(props) {
   var tools = enableClipboard ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_copied.Copied, {
     show: showTools,
     text: value,
+    onCopied: onCopied,
     render: components.copied
   }) : undefined;
   var eventProps = {};
@@ -199,7 +205,9 @@ function RooNode(props) {
       return setShowTools(false);
     };
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), eventProps), {}, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    className: "w-rjv-inner"
+  }, eventProps), {}, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_value.Line, {
       style: {
         display: 'inline-flex',
@@ -228,8 +236,9 @@ function RooNode(props) {
         children: [nameKeys.length, " items"]
       }), tools]
     }), expand && /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Line, {
+      className: "w-rjv-content",
       style: {
-        borderLeft: '1px solid var(--w-rjv-line-color, #ebebeb)',
+        borderLeft: 'var(--w-rjv-border-left-width, 1px) solid var(--w-rjv-line-color, #ebebeb)',
         marginLeft: 6
       },
       children: nameKeys.length > 0 && nameKeys.map(function (key, idx) {
@@ -246,6 +255,7 @@ function RooNode(props) {
         if (Array.isArray(item) && !isEmpty) {
           var label = isArray ? idx : key;
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Line, {
+            className: "w-rjv-wrap",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RooNode, (0, _objectSpread2["default"])({
               value: item,
               keyid: keyid + subkeyid + label,
@@ -255,6 +265,7 @@ function RooNode(props) {
         }
         if ((0, _typeof2["default"])(item) === 'object' && item && !(item instanceof Date) && !isEmpty) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Line, {
+            className: "w-rjv-wrap",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RooNode, (0, _objectSpread2["default"])({
               keyid: keyid + subkeyid + key,
               value: item,
@@ -266,7 +277,6 @@ function RooNode(props) {
           return;
         }
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.ValueView, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, valueViewProps), {}, {
-          renderBraces: components.braces,
           renderKey: renderKey,
           keyName: key,
           value: item

package/cjs/value.js

@@ -142,7 +142,12 @@ function ValueView(props) {
     show: showTools,
     text: value
   }) : undefined;
-  var eventProps = {};
+  var eventProps = {
+    className: 'w-rjv-line',
+    style: {
+      paddingLeft: indentWidth
+    }
+  };
   if (enableClipboard) {
     eventProps.onMouseEnter = function () {
       return setShowTools(true);
@@ -152,24 +157,22 @@ function ValueView(props) {
     };
   }
   if (content && typeof content === 'string') {
-    var valueView = renderValue ? renderValue({
+    var reView = renderValue && renderValue({
       className: 'w-rjv-value',
       style: (0, _objectSpread2["default"])({
         color: color
       }, style),
       type: type,
-      children: content
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
+      content: content,
+      children: value
+    });
+    var valueView = reView ? reView : /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
       color: color,
       style: style,
       className: "w-rjv-value",
       children: content
     });
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
-      style: {
-        paddingLeft: indentWidth
-      }
-    }, eventProps), {}, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, eventProps), {}, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
         children: [renderKey, /*#__PURE__*/(0, _jsxRuntime.jsx)(Colon, {}), typeView, valueView, tools]
       }))
@@ -188,11 +191,7 @@ function ValueView(props) {
       children: [length, " items"]
     })]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
-    style: {
-      paddingLeft: indentWidth
-    }
-  }, eventProps), {}, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, eventProps), {}, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
       children: [renderKey, /*#__PURE__*/(0, _jsxRuntime.jsx)(Colon, {}), typeView, empty, tools]
     }))

package/esm/copied.d.ts

@@ -2,6 +2,7 @@
 export interface CopiedProps<T = object> extends React.SVGProps<SVGSVGElement> {
     show?: boolean;
     text?: T;
+    onCopied?: (text: string, obj: T) => void;
     render?: (props: Omit<CopiedProps<T>, 'render'>) => JSX.Element;
 }
 export declare function Copied<T>(props: CopiedProps<T>): JSX.Element | null;

package/esm/index.d.ts

@@ -28,6 +28,8 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
         keyid: string;
         keyName?: string | number;
     }) => void;
+    /** Fires event when you copy */
+    onCopied?: CopiedProps<T>['onCopied'];
     /** Redefine interface elements to re-render. */
     components?: {
         braces?: MetaProps['render'];

package/esm/node.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutP
 var _excluded = ["isArray", "start", "className", "render"],
   _excluded2 = ["style", "render"],
   _excluded3 = ["children", "render", "color", "value", "className", "show", "quotes"],
-  _excluded4 = ["value", "keyName", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "indentWidth", "collapsed", "level", "keyid", "quotes", "onExpand"];
+  _excluded4 = ["value", "keyName", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "indentWidth", "collapsed", "level", "keyid", "quotes", "onCopied", "onExpand"];
 import { Fragment, useId, cloneElement, useState } from 'react';
 import { ValueView, Colon, Label, Line, typeMap } from './value';
 import { TriangleArrow } from './arrow/TriangleArrow';
@@ -97,7 +97,7 @@ export var CountInfo = _ref3 => {
       fontStyle: 'italic'
     },
     color: "var(--w-rjv-info-color, #0000004d)",
-    className: "object-size",
+    className: "w-rjv-object-size",
     children: children
   });
 };
@@ -115,6 +115,7 @@ export function RooNode(props) {
       level = 1,
       keyid = 'root',
       quotes = '"',
+      onCopied,
       onExpand
     } = props,
     reset = _objectWithoutPropertiesLoose(props, _excluded4);
@@ -142,6 +143,7 @@ export function RooNode(props) {
     displayDataTypes,
     displayObjectSize,
     enableClipboard,
+    onCopied,
     onExpand,
     collapsed,
     quotes,
@@ -155,18 +157,22 @@ export function RooNode(props) {
     displayObjectSize,
     enableClipboard,
     indentWidth,
+    renderBraces: components.braces,
     renderValue: components.value
   };
   var arrowView = components.arrow ? /*#__PURE__*/cloneElement(components.arrow, {
     style: arrowStyle,
-    'data-expand': expand
+    'data-expand': expand,
+    className: "w-rjv-arrow"
   }) : /*#__PURE__*/_jsx(TriangleArrow, {
-    style: arrowStyle
+    style: arrowStyle,
+    className: "w-rjv-arrow"
   });
   var [showTools, setShowTools] = useState(false);
   var tools = enableClipboard ? /*#__PURE__*/_jsx(Copied, {
     show: showTools,
     text: value,
+    onCopied: onCopied,
     render: components.copied
   }) : undefined;
   var eventProps = {};
@@ -174,7 +180,9 @@ export function RooNode(props) {
     eventProps.onMouseEnter = () => setShowTools(true);
     eventProps.onMouseLeave = () => setShowTools(false);
   }
-  return /*#__PURE__*/_jsxs("div", _extends({}, reset, eventProps, {
+  return /*#__PURE__*/_jsxs("div", _extends({}, reset, {
+    className: "w-rjv-inner"
+  }, eventProps, {
     children: [/*#__PURE__*/_jsxs(Line, {
       style: {
         display: 'inline-flex',
@@ -203,8 +211,9 @@ export function RooNode(props) {
         children: [nameKeys.length, " items"]
       }), tools]
     }), expand && /*#__PURE__*/_jsx(Line, {
+      className: "w-rjv-content",
       style: {
-        borderLeft: '1px solid var(--w-rjv-line-color, #ebebeb)',
+        borderLeft: 'var(--w-rjv-border-left-width, 1px) solid var(--w-rjv-line-color, #ebebeb)',
         marginLeft: 6
       },
       children: nameKeys.length > 0 && nameKeys.map((key, idx) => {
@@ -221,6 +230,7 @@ export function RooNode(props) {
         if (Array.isArray(item) && !isEmpty) {
           var label = isArray ? idx : key;
           return /*#__PURE__*/_jsx(Line, {
+            className: "w-rjv-wrap",
             children: /*#__PURE__*/_jsx(RooNode, _extends({
               value: item,
               keyid: keyid + subkeyid + label,
@@ -230,6 +240,7 @@ export function RooNode(props) {
         }
         if (typeof item === 'object' && item && !(item instanceof Date) && !isEmpty) {
           return /*#__PURE__*/_jsx(Line, {
+            className: "w-rjv-wrap",
             children: /*#__PURE__*/_jsx(RooNode, _extends({
               keyid: keyid + subkeyid + key,
               value: item,
@@ -241,7 +252,6 @@ export function RooNode(props) {
           return;
         }
         return /*#__PURE__*/_jsx(ValueView, _extends({}, valueViewProps, {
-          renderBraces: components.braces,
           renderKey: renderKey,
           keyName: key,
           value: item

package/esm/value.js

@@ -124,30 +124,33 @@ export function ValueView(props) {
     show: showTools,
     text: value
   }) : undefined;
-  var eventProps = {};
+  var eventProps = {
+    className: 'w-rjv-line',
+    style: {
+      paddingLeft: indentWidth
+    }
+  };
   if (enableClipboard) {
     eventProps.onMouseEnter = () => setShowTools(true);
     eventProps.onMouseLeave = () => setShowTools(false);
   }
   if (content && typeof content === 'string') {
-    var valueView = renderValue ? renderValue({
+    var reView = renderValue && renderValue({
       className: 'w-rjv-value',
       style: _extends({
         color
       }, style),
       type,
-      children: content
-    }) : /*#__PURE__*/_jsx(Label, {
+      content,
+      children: value
+    });
+    var valueView = reView ? reView : /*#__PURE__*/_jsx(Label, {
       color: color,
       style: style,
       className: "w-rjv-value",
       children: content
     });
-    return /*#__PURE__*/_jsx(Line, _extends({
-      style: {
-        paddingLeft: indentWidth
-      }
-    }, eventProps, {
+    return /*#__PURE__*/_jsx(Line, _extends({}, eventProps, {
       children: /*#__PURE__*/_jsxs(Label, _extends({}, reset, {
         children: [renderKey, /*#__PURE__*/_jsx(Colon, {}), typeView, valueView, tools]
       }))
@@ -166,11 +169,7 @@ export function ValueView(props) {
       children: [length, " items"]
     })]
   });
-  return /*#__PURE__*/_jsx(Line, _extends({
-    style: {
-      paddingLeft: indentWidth
-    }
-  }, eventProps, {
+  return /*#__PURE__*/_jsx(Line, _extends({}, eventProps, {
     children: /*#__PURE__*/_jsxs(Label, _extends({}, reset, {
       children: [renderKey, /*#__PURE__*/_jsx(Colon, {}), typeView, empty, tools]
     }))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-json-view",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "JSON viewer for react.",
   "main": "cjs/index.js",
   "module": "esm/index.js",