@uiw/react-json-view 1.0.0 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/README.md +70 -1
  2. package/cjs/copied.d.ts +2 -1
  3. package/cjs/copied.js +6 -4
  4. package/cjs/index.d.ts +14 -1
  5. package/cjs/node.d.ts +4 -2
  6. package/cjs/node.js +37 -15
  7. package/cjs/value.js +22 -19
  8. package/esm/copied.d.ts +2 -1
  9. package/esm/copied.js +7 -5
  10. package/esm/index.d.ts +14 -1
  11. package/esm/node.d.ts +4 -2
  12. package/esm/node.js +33 -13
  13. package/esm/value.js +18 -15
  14. package/package.json +20 -8
package/README.md CHANGED
@@ -22,6 +22,7 @@ A React component for displaying and editing javascript arrays and JSON objects.
22
22
  📚 Use Typescript to write, better code hints.
23
23
  🎨 Support theme customization & [`online editing`](https://uiwjs.github.io/react-json-view/#online-editing-theme) theme
24
24
  🌒 Support dark/light mode
25
+ 📦 Zero dependencies
25
26
 
26
27
  ## Quick Start
27
28
 
@@ -243,11 +244,12 @@ export default function Demo() {
243
244
  <JsonView
244
245
  value={object}
245
246
  keyName="root"
247
+ quotes=""
246
248
  displayObjectSize={false}
247
249
  displayDataTypes={false}
248
250
  style={{
249
251
  '--w-rjv-background-color': '#ffffff',
250
- '--w-rjv-border-left': '0',
252
+ '--w-rjv-border-left-width': '0',
251
253
  }}
252
254
  components={{
253
255
  braces: () => <span />,
@@ -264,6 +266,45 @@ export default function Demo() {
264
266
  }
265
267
  ```
266
268
 
269
+ **Preview Picture**
270
+
271
+ ```tsx mdx:preview
272
+ import React from 'react';
273
+ import JsonView from '@uiw/react-json-view';
274
+
275
+ const object = {
276
+ avatar: 'https://i.imgur.com/MK3eW3As.jpg',
277
+ string: 'Lorem ipsum dolor sit amet',
278
+ integer: 42,
279
+ }
280
+
281
+ function value({ type, children, ...props }) {
282
+ if (type === 'string' && /\.(jpg)$/.test(children)) {
283
+ return (
284
+ <span {...props}>
285
+ <img src={children} height="36" />
286
+ </span>
287
+ );
288
+ }
289
+ }
290
+
291
+ export default function Demo() {
292
+ return (
293
+ <JsonView
294
+ value={object}
295
+ keyName="root"
296
+ // quotes=""
297
+ displayObjectSize={false}
298
+ displayDataTypes={false}
299
+ style={{
300
+ '--w-rjv-background-color': '#ffffff',
301
+ }}
302
+ components={{ value }}
303
+ />
304
+ )
305
+ }
306
+ ```
307
+
267
308
  ## Modify Icon Style
268
309
 
269
310
  Use built-in default icons.
@@ -392,6 +433,17 @@ export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttr
392
433
  keyName?: string | number;
393
434
  /** The user can copy objects and arrays to clipboard by clicking on the clipboard icon. @default true */
394
435
  enableClipboard?: boolean;
436
+ /** Display for quotes in object-key @default " */
437
+ quotes?: "'" | '"' | '';
438
+ /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. @default false */
439
+ collapsed?: boolean | number;
440
+ /** Callback function for when a treeNode is expanded or collapsed */
441
+ onExpand?: (props: {
442
+ expand: boolean;
443
+ value: T;
444
+ keyid: string;
445
+ keyName?: string | number;
446
+ }) => void;
395
447
  /** Redefine interface elements to re-render. */
396
448
  components?: {
397
449
  braces?: MetaProps['render'];
@@ -405,6 +457,23 @@ declare const JsonView: React.ForwardRefExoticComponent<Omit<JsonViewProps<objec
405
457
  export default JsonView;
406
458
  ```
407
459
 
460
+ ## Size and dependencies
461
+
462
+ Here is the size benchmark (using [bundlephobia.com](https://bundlephobia.com)) against similar React libraries (found by [`npmjs.com/search`](https://www.npmjs.com/search?q=react%20json&ranking=popularity)):
463
+
464
+ | Library | Bundle size | Bundle size (gzip) | Deps | Last commit |
465
+ | ------- | ------- | ------- | ------- | ------- |
466
+ | **@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=last)](https://github.com/uiwjs/react-json-view/commits) |
467
+ | 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=last)](https://github.com/AnyRoad/react-json-view-lite/commits) |
468
+ | 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=last)](https://github.com/chenckang/react-json-pretty/commits) |
469
+ | 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=last)](https://github.com/Lapple/react-json-inspector/commits) |
470
+ | 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=last)](https://github.com/reduxjs/redux-devtools/commits) |
471
+ | 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=last)](https://github.com/mac-s-g/react-json-view/commits) |
472
+ | 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) |
473
+ | 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) |
474
+ | 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) |
475
+ | @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) |
476
+
408
477
  ## Development
409
478
 
410
479
  Runs the project in development mode.
package/cjs/copied.d.ts CHANGED
@@ -2,5 +2,6 @@
2
2
  export interface CopiedProps<T = object> extends React.SVGProps<SVGSVGElement> {
3
3
  show?: boolean;
4
4
  text?: T;
5
+ render?: (props: Omit<CopiedProps<T>, 'render'>) => JSX.Element;
5
6
  }
6
- export declare function Copied<T>(props: CopiedProps<T>): import("react/jsx-runtime").JSX.Element | null;
7
+ export declare function Copied<T>(props: CopiedProps<T>): JSX.Element | null;
package/cjs/copied.js CHANGED
@@ -10,12 +10,13 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
10
10
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
11
11
  var _react = require("react");
12
12
  var _jsxRuntime = require("react/jsx-runtime");
13
- var _excluded = ["children", "style", "text", "show"];
13
+ var _excluded = ["children", "style", "text", "render", "show"];
14
14
  function Copied(props) {
15
15
  var children = props.children,
16
16
  style = props.style,
17
17
  _props$text = props.text,
18
18
  text = _props$text === void 0 ? '' : _props$text,
19
+ render = props.render,
19
20
  show = props.show,
20
21
  reset = (0, _objectWithoutProperties2["default"])(props, _excluded);
21
22
  if (!show) return null;
@@ -45,13 +46,14 @@ function Copied(props) {
45
46
  marginLeft: 5
46
47
  });
47
48
  var svgProps = (0, _objectSpread2["default"])({
48
- height: "1em",
49
- width: "1em",
50
- fill: "var(--w-rjv-copied-color, currentColor)",
49
+ height: '1em',
50
+ width: '1em',
51
+ fill: 'var(--w-rjv-copied-color, currentColor)',
51
52
  onClick: click,
52
53
  style: defalutStyle,
53
54
  className: 'w-rjv-copied'
54
55
  }, reset);
56
+ if (render) return render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), svgProps));
55
57
  if (copied) {
56
58
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
57
59
  viewBox: "0 0 38 38"
package/cjs/index.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  import React from 'react';
2
2
  import { MetaProps, SemicolonProps, EllipsisProps } from './node';
3
3
  import { ValueViewProps } from './value';
4
+ import { CopiedProps } from './copied';
4
5
  export * from './node';
5
6
  export * from './value';
6
- export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
7
+ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
7
8
  /** This property contains your input JSON */
8
9
  value?: T;
9
10
  /** Set the indent-width for nested objects @default 15 */
@@ -16,6 +17,17 @@ export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttr
16
17
  keyName?: string | number;
17
18
  /** The user can copy objects and arrays to clipboard by clicking on the clipboard icon. @default true */
18
19
  enableClipboard?: boolean;
20
+ /** Display for quotes in object-key @default " */
21
+ quotes?: "'" | '"' | '';
22
+ /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. @default false */
23
+ collapsed?: boolean | number;
24
+ /** Callback function for when a treeNode is expanded or collapsed */
25
+ onExpand?: (props: {
26
+ expand: boolean;
27
+ value: T;
28
+ keyid: string;
29
+ keyName?: string | number;
30
+ }) => void;
19
31
  /** Redefine interface elements to re-render. */
20
32
  components?: {
21
33
  braces?: MetaProps['render'];
@@ -23,6 +35,7 @@ export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttr
23
35
  arrow?: JSX.Element;
24
36
  objectKey?: SemicolonProps['render'];
25
37
  value?: ValueViewProps<T>['renderValue'];
38
+ copied?: CopiedProps<T>['render'];
26
39
  };
27
40
  }
28
41
  declare const JsonView: React.ForwardRefExoticComponent<Omit<JsonViewProps<object>, "ref"> & React.RefAttributes<HTMLDivElement>>;
package/cjs/node.d.ts CHANGED
@@ -6,20 +6,22 @@ export interface MetaProps extends LabelProps {
6
6
  start?: boolean;
7
7
  render?: (props: Pick<MetaProps, 'start' | 'isArray' | 'className' | 'children'>) => JSX.Element;
8
8
  }
9
- export declare function Meta(props: MetaProps): import("react/jsx-runtime").JSX.Element;
9
+ export declare function Meta(props: MetaProps): JSX.Element;
10
10
  export interface EllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
11
11
  render?: (props: EllipsisProps) => JSX.Element;
12
12
  }
13
13
  export declare const Ellipsis: FC<PropsWithChildren<EllipsisProps>>;
14
14
  export interface SemicolonProps extends LabelProps {
15
15
  show?: boolean;
16
+ quotes?: JsonViewProps<object>['quotes'];
16
17
  value?: object;
17
18
  render?: (props: Omit<SemicolonProps, 'show'> & {}) => JSX.Element;
18
19
  }
19
20
  export declare const Semicolon: FC<PropsWithChildren<SemicolonProps>>;
20
21
  export declare const CountInfo: FC<PropsWithChildren<LabelProps>>;
21
- export interface RooNodeProps<T> extends JsonViewProps<T> {
22
+ export interface RooNodeProps<T extends object> extends JsonViewProps<T> {
22
23
  keyName?: string | number;
23
24
  keyid?: string;
25
+ level?: number;
24
26
  }
25
27
  export declare function RooNode<T extends object>(props: RooNodeProps<T>): import("react/jsx-runtime").JSX.Element;
package/cjs/node.js CHANGED
@@ -20,8 +20,8 @@ var _copied = require("./copied");
20
20
  var _jsxRuntime = require("react/jsx-runtime");
21
21
  var _excluded = ["isArray", "start", "className", "render"],
22
22
  _excluded2 = ["style", "render"],
23
- _excluded3 = ["children", "render", "color", "value", "className", "show"],
24
- _excluded4 = ["value", "keyName", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "indentWidth", "keyid"];
23
+ _excluded3 = ["children", "render", "color", "value", "className", "show", "quotes"],
24
+ _excluded4 = ["value", "keyName", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "indentWidth", "collapsed", "level", "keyid", "quotes", "onExpand"];
25
25
  function Meta(props) {
26
26
  var _props$isArray = props.isArray,
27
27
  isArray = _props$isArray === void 0 ? false : _props$isArray,
@@ -77,8 +77,9 @@ var Semicolon = function Semicolon(_ref2) {
77
77
  _ref2$className = _ref2.className,
78
78
  className = _ref2$className === void 0 ? 'w-rjv-object-key' : _ref2$className,
79
79
  show = _ref2.show,
80
+ quotes = _ref2.quotes,
80
81
  props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded3);
81
- var content = show ? "\"".concat(children, "\"") : children;
82
+ var content = show ? "".concat(quotes).concat(children).concat(quotes) : children;
82
83
  if (render) return render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({
83
84
  className: className
84
85
  }, props), {}, {
@@ -124,8 +125,14 @@ function RooNode(props) {
124
125
  enableClipboard = _props$enableClipboar === void 0 ? true : _props$enableClipboar,
125
126
  _props$indentWidth = props.indentWidth,
126
127
  indentWidth = _props$indentWidth === void 0 ? 15 : _props$indentWidth,
128
+ collapsed = props.collapsed,
129
+ _props$level = props.level,
130
+ level = _props$level === void 0 ? 1 : _props$level,
127
131
  _props$keyid = props.keyid,
128
132
  keyid = _props$keyid === void 0 ? 'root' : _props$keyid,
133
+ _props$quotes = props.quotes,
134
+ quotes = _props$quotes === void 0 ? '"' : _props$quotes,
135
+ onExpand = props.onExpand,
129
136
  reset = (0, _objectWithoutProperties2["default"])(props, _excluded4);
130
137
  var isArray = Array.isArray(value);
131
138
  var nameKeys = isArray ? Object.keys(value).map(function (m) {
@@ -133,12 +140,18 @@ function RooNode(props) {
133
140
  }) : Object.keys(value);
134
141
  var subkeyid = (0, _react.useId)();
135
142
  var expands = (0, _store.useExpandsStatus)();
136
- var expand = (_expands$keyid = expands[keyid]) !== null && _expands$keyid !== void 0 ? _expands$keyid : true;
143
+ var expand = (_expands$keyid = expands[keyid]) !== null && _expands$keyid !== void 0 ? _expands$keyid : typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level <= collapsed : true;
137
144
  var arrowStyle = {
138
145
  transform: "rotate(".concat(expand ? '0' : '-90', "deg)"),
139
146
  transition: 'all 0.3s'
140
147
  };
141
148
  var handle = function handle() {
149
+ onExpand && typeof onExpand === 'function' && onExpand({
150
+ expand: !expand,
151
+ keyid: keyid,
152
+ keyName: keyName,
153
+ value: value
154
+ });
142
155
  !expand ? _store.store.expand(keyid) : _store.store.collapse(keyid);
143
156
  };
144
157
  var subNodeProps = {
@@ -146,6 +159,11 @@ function RooNode(props) {
146
159
  indentWidth: indentWidth,
147
160
  displayDataTypes: displayDataTypes,
148
161
  displayObjectSize: displayObjectSize,
162
+ enableClipboard: enableClipboard,
163
+ onExpand: onExpand,
164
+ collapsed: collapsed,
165
+ quotes: quotes,
166
+ level: level + 1,
149
167
  style: {
150
168
  paddingLeft: indentWidth
151
169
  }
@@ -169,17 +187,19 @@ function RooNode(props) {
169
187
  setShowTools = _useState2[1];
170
188
  var tools = enableClipboard ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_copied.Copied, {
171
189
  show: showTools,
172
- text: value
190
+ text: value,
191
+ render: components.copied
173
192
  }) : undefined;
174
- var mouseEnter = function mouseEnter() {
175
- return setShowTools(true);
176
- };
177
- var mouseLeave = function mouseLeave() {
178
- return setShowTools(false);
179
- };
180
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
181
- onMouseEnter: mouseEnter,
182
- onMouseLeave: mouseLeave,
193
+ var eventProps = {};
194
+ if (enableClipboard) {
195
+ eventProps.onMouseEnter = function () {
196
+ return setShowTools(true);
197
+ };
198
+ eventProps.onMouseLeave = function () {
199
+ return setShowTools(false);
200
+ };
201
+ }
202
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), eventProps), {}, {
183
203
  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_value.Line, {
184
204
  style: {
185
205
  display: 'inline-flex',
@@ -189,6 +209,7 @@ function RooNode(props) {
189
209
  children: [arrowView, (typeof keyName === 'string' || typeof keyName === 'number') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
190
210
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Semicolon, {
191
211
  value: value,
212
+ quotes: quotes,
192
213
  render: components.objectKey,
193
214
  color: typeof keyName === 'number' ? _value.typeMap['number'].color : '',
194
215
  show: typeof keyName === 'string',
@@ -208,13 +229,14 @@ function RooNode(props) {
208
229
  }), tools]
209
230
  }), expand && /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Line, {
210
231
  style: {
211
- borderLeft: '1px solid var(--w-rjv-line-color, #ebebeb)',
232
+ borderLeft: 'var(--w-rjv-border-left-width, 1px) solid var(--w-rjv-line-color, #ebebeb)',
212
233
  marginLeft: 6
213
234
  },
214
235
  children: nameKeys.length > 0 && nameKeys.map(function (key, idx) {
215
236
  var item = value[key];
216
237
  var renderKey = /*#__PURE__*/(0, _jsxRuntime.jsx)(Semicolon, {
217
238
  value: item,
239
+ quotes: quotes,
218
240
  render: components.objectKey,
219
241
  color: typeof key === 'number' ? _value.typeMap['number'].color : '',
220
242
  show: typeof key === 'string',
package/cjs/value.js CHANGED
@@ -142,36 +142,40 @@ function ValueView(props) {
142
142
  show: showTools,
143
143
  text: value
144
144
  }) : undefined;
145
- var mouseEnter = function mouseEnter() {
146
- return setShowTools(true);
147
- };
148
- var mouseLeave = function mouseLeave() {
149
- return setShowTools(false);
150
- };
145
+ var eventProps = {};
146
+ if (enableClipboard) {
147
+ eventProps.onMouseEnter = function () {
148
+ return setShowTools(true);
149
+ };
150
+ eventProps.onMouseLeave = function () {
151
+ return setShowTools(false);
152
+ };
153
+ }
151
154
  if (content && typeof content === 'string') {
152
- var valueView = renderValue ? renderValue({
155
+ var reView = renderValue && renderValue({
153
156
  className: 'w-rjv-value',
154
157
  style: (0, _objectSpread2["default"])({
155
158
  color: color
156
159
  }, style),
157
160
  type: type,
158
- children: content
159
- }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
161
+ content: content,
162
+ children: value
163
+ });
164
+ var valueView = reView ? reView : /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
160
165
  color: color,
161
166
  style: style,
162
167
  className: "w-rjv-value",
163
168
  children: content
164
169
  });
165
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
170
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
166
171
  style: {
167
172
  paddingLeft: indentWidth
168
- },
169
- onMouseEnter: mouseEnter,
170
- onMouseLeave: mouseLeave,
173
+ }
174
+ }, eventProps), {}, {
171
175
  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
172
176
  children: [renderKey, /*#__PURE__*/(0, _jsxRuntime.jsx)(Colon, {}), typeView, valueView, tools]
173
177
  }))
174
- });
178
+ }));
175
179
  }
176
180
  var length = Array.isArray(value) ? value.length : Object.keys(value).length;
177
181
  var empty = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
@@ -186,16 +190,15 @@ function ValueView(props) {
186
190
  children: [length, " items"]
187
191
  })]
188
192
  });
189
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
193
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
190
194
  style: {
191
195
  paddingLeft: indentWidth
192
- },
193
- onMouseEnter: mouseEnter,
194
- onMouseLeave: mouseLeave,
196
+ }
197
+ }, eventProps), {}, {
195
198
  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
196
199
  children: [renderKey, /*#__PURE__*/(0, _jsxRuntime.jsx)(Colon, {}), typeView, empty, tools]
197
200
  }))
198
- });
201
+ }));
199
202
  }
200
203
  var Label = function Label(_ref2) {
201
204
  var children = _ref2.children,
package/esm/copied.d.ts CHANGED
@@ -2,5 +2,6 @@
2
2
  export interface CopiedProps<T = object> extends React.SVGProps<SVGSVGElement> {
3
3
  show?: boolean;
4
4
  text?: T;
5
+ render?: (props: Omit<CopiedProps<T>, 'render'>) => JSX.Element;
5
6
  }
6
- export declare function Copied<T>(props: CopiedProps<T>): import("react/jsx-runtime").JSX.Element | null;
7
+ export declare function Copied<T>(props: CopiedProps<T>): JSX.Element | null;
package/esm/copied.js CHANGED
@@ -1,12 +1,13 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
3
- var _excluded = ["children", "style", "text", "show"];
4
- import { useState } from "react";
3
+ var _excluded = ["children", "style", "text", "render", "show"];
4
+ import { useState } from 'react';
5
5
  import { jsx as _jsx } from "react/jsx-runtime";
6
6
  export function Copied(props) {
7
7
  var {
8
8
  style,
9
9
  text = '',
10
+ render,
10
11
  show
11
12
  } = props,
12
13
  reset = _objectWithoutPropertiesLoose(props, _excluded);
@@ -34,13 +35,14 @@ export function Copied(props) {
34
35
  marginLeft: 5
35
36
  });
36
37
  var svgProps = _extends({
37
- height: "1em",
38
- width: "1em",
39
- fill: "var(--w-rjv-copied-color, currentColor)",
38
+ height: '1em',
39
+ width: '1em',
40
+ fill: 'var(--w-rjv-copied-color, currentColor)',
40
41
  onClick: click,
41
42
  style: defalutStyle,
42
43
  className: 'w-rjv-copied'
43
44
  }, reset);
45
+ if (render) return render(_extends({}, props, svgProps));
44
46
  if (copied) {
45
47
  return /*#__PURE__*/_jsx("svg", _extends({
46
48
  viewBox: "0 0 38 38"
package/esm/index.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  import React from 'react';
2
2
  import { MetaProps, SemicolonProps, EllipsisProps } from './node';
3
3
  import { ValueViewProps } from './value';
4
+ import { CopiedProps } from './copied';
4
5
  export * from './node';
5
6
  export * from './value';
6
- export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
7
+ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
7
8
  /** This property contains your input JSON */
8
9
  value?: T;
9
10
  /** Set the indent-width for nested objects @default 15 */
@@ -16,6 +17,17 @@ export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttr
16
17
  keyName?: string | number;
17
18
  /** The user can copy objects and arrays to clipboard by clicking on the clipboard icon. @default true */
18
19
  enableClipboard?: boolean;
20
+ /** Display for quotes in object-key @default " */
21
+ quotes?: "'" | '"' | '';
22
+ /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. @default false */
23
+ collapsed?: boolean | number;
24
+ /** Callback function for when a treeNode is expanded or collapsed */
25
+ onExpand?: (props: {
26
+ expand: boolean;
27
+ value: T;
28
+ keyid: string;
29
+ keyName?: string | number;
30
+ }) => void;
19
31
  /** Redefine interface elements to re-render. */
20
32
  components?: {
21
33
  braces?: MetaProps['render'];
@@ -23,6 +35,7 @@ export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttr
23
35
  arrow?: JSX.Element;
24
36
  objectKey?: SemicolonProps['render'];
25
37
  value?: ValueViewProps<T>['renderValue'];
38
+ copied?: CopiedProps<T>['render'];
26
39
  };
27
40
  }
28
41
  declare const JsonView: React.ForwardRefExoticComponent<Omit<JsonViewProps<object>, "ref"> & React.RefAttributes<HTMLDivElement>>;
package/esm/node.d.ts CHANGED
@@ -6,20 +6,22 @@ export interface MetaProps extends LabelProps {
6
6
  start?: boolean;
7
7
  render?: (props: Pick<MetaProps, 'start' | 'isArray' | 'className' | 'children'>) => JSX.Element;
8
8
  }
9
- export declare function Meta(props: MetaProps): import("react/jsx-runtime").JSX.Element;
9
+ export declare function Meta(props: MetaProps): JSX.Element;
10
10
  export interface EllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
11
11
  render?: (props: EllipsisProps) => JSX.Element;
12
12
  }
13
13
  export declare const Ellipsis: FC<PropsWithChildren<EllipsisProps>>;
14
14
  export interface SemicolonProps extends LabelProps {
15
15
  show?: boolean;
16
+ quotes?: JsonViewProps<object>['quotes'];
16
17
  value?: object;
17
18
  render?: (props: Omit<SemicolonProps, 'show'> & {}) => JSX.Element;
18
19
  }
19
20
  export declare const Semicolon: FC<PropsWithChildren<SemicolonProps>>;
20
21
  export declare const CountInfo: FC<PropsWithChildren<LabelProps>>;
21
- export interface RooNodeProps<T> extends JsonViewProps<T> {
22
+ export interface RooNodeProps<T extends object> extends JsonViewProps<T> {
22
23
  keyName?: string | number;
23
24
  keyid?: string;
25
+ level?: number;
24
26
  }
25
27
  export declare function RooNode<T extends object>(props: RooNodeProps<T>): import("react/jsx-runtime").JSX.Element;
package/esm/node.js CHANGED
@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
3
3
  var _excluded = ["isArray", "start", "className", "render"],
4
4
  _excluded2 = ["style", "render"],
5
- _excluded3 = ["children", "render", "color", "value", "className", "show"],
6
- _excluded4 = ["value", "keyName", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "indentWidth", "keyid"];
5
+ _excluded3 = ["children", "render", "color", "value", "className", "show", "quotes"],
6
+ _excluded4 = ["value", "keyName", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "indentWidth", "collapsed", "level", "keyid", "quotes", "onExpand"];
7
7
  import { Fragment, useId, cloneElement, useState } from 'react';
8
8
  import { ValueView, Colon, Label, Line, typeMap } from './value';
9
9
  import { TriangleArrow } from './arrow/TriangleArrow';
@@ -66,10 +66,11 @@ export var Semicolon = _ref2 => {
66
66
  color,
67
67
  value,
68
68
  className = 'w-rjv-object-key',
69
- show
69
+ show,
70
+ quotes
70
71
  } = _ref2,
71
72
  props = _objectWithoutPropertiesLoose(_ref2, _excluded3);
72
- var content = show ? "\"" + children + "\"" : children;
73
+ var content = show ? "" + quotes + children + quotes : children;
73
74
  if (render) return render(_extends({
74
75
  className
75
76
  }, props, {
@@ -110,19 +111,29 @@ export function RooNode(props) {
110
111
  displayObjectSize = true,
111
112
  enableClipboard = true,
112
113
  indentWidth = 15,
113
- keyid = 'root'
114
+ collapsed,
115
+ level = 1,
116
+ keyid = 'root',
117
+ quotes = '"',
118
+ onExpand
114
119
  } = props,
115
120
  reset = _objectWithoutPropertiesLoose(props, _excluded4);
116
121
  var isArray = Array.isArray(value);
117
122
  var nameKeys = isArray ? Object.keys(value).map(m => Number(m)) : Object.keys(value);
118
123
  var subkeyid = useId();
119
124
  var expands = useExpandsStatus();
120
- var expand = (_expands$keyid = expands[keyid]) != null ? _expands$keyid : true;
125
+ var expand = (_expands$keyid = expands[keyid]) != null ? _expands$keyid : typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level <= collapsed : true;
121
126
  var arrowStyle = {
122
127
  transform: "rotate(" + (expand ? '0' : '-90') + "deg)",
123
128
  transition: 'all 0.3s'
124
129
  };
125
130
  var handle = () => {
131
+ onExpand && typeof onExpand === 'function' && onExpand({
132
+ expand: !expand,
133
+ keyid,
134
+ keyName,
135
+ value: value
136
+ });
126
137
  !expand ? store.expand(keyid) : store.collapse(keyid);
127
138
  };
128
139
  var subNodeProps = {
@@ -130,6 +141,11 @@ export function RooNode(props) {
130
141
  indentWidth,
131
142
  displayDataTypes,
132
143
  displayObjectSize,
144
+ enableClipboard,
145
+ onExpand,
146
+ collapsed,
147
+ quotes,
148
+ level: level + 1,
133
149
  style: {
134
150
  paddingLeft: indentWidth
135
151
  }
@@ -150,13 +166,15 @@ export function RooNode(props) {
150
166
  var [showTools, setShowTools] = useState(false);
151
167
  var tools = enableClipboard ? /*#__PURE__*/_jsx(Copied, {
152
168
  show: showTools,
153
- text: value
169
+ text: value,
170
+ render: components.copied
154
171
  }) : undefined;
155
- var mouseEnter = () => setShowTools(true);
156
- var mouseLeave = () => setShowTools(false);
157
- return /*#__PURE__*/_jsxs("div", _extends({}, reset, {
158
- onMouseEnter: mouseEnter,
159
- onMouseLeave: mouseLeave,
172
+ var eventProps = {};
173
+ if (enableClipboard) {
174
+ eventProps.onMouseEnter = () => setShowTools(true);
175
+ eventProps.onMouseLeave = () => setShowTools(false);
176
+ }
177
+ return /*#__PURE__*/_jsxs("div", _extends({}, reset, eventProps, {
160
178
  children: [/*#__PURE__*/_jsxs(Line, {
161
179
  style: {
162
180
  display: 'inline-flex',
@@ -166,6 +184,7 @@ export function RooNode(props) {
166
184
  children: [arrowView, (typeof keyName === 'string' || typeof keyName === 'number') && /*#__PURE__*/_jsxs(Fragment, {
167
185
  children: [/*#__PURE__*/_jsx(Semicolon, {
168
186
  value: value,
187
+ quotes: quotes,
169
188
  render: components.objectKey,
170
189
  color: typeof keyName === 'number' ? typeMap['number'].color : '',
171
190
  show: typeof keyName === 'string',
@@ -185,13 +204,14 @@ export function RooNode(props) {
185
204
  }), tools]
186
205
  }), expand && /*#__PURE__*/_jsx(Line, {
187
206
  style: {
188
- borderLeft: '1px solid var(--w-rjv-line-color, #ebebeb)',
207
+ borderLeft: 'var(--w-rjv-border-left-width, 1px) solid var(--w-rjv-line-color, #ebebeb)',
189
208
  marginLeft: 6
190
209
  },
191
210
  children: nameKeys.length > 0 && nameKeys.map((key, idx) => {
192
211
  var item = value[key];
193
212
  var renderKey = /*#__PURE__*/_jsx(Semicolon, {
194
213
  value: item,
214
+ quotes: quotes,
195
215
  render: components.objectKey,
196
216
  color: typeof key === 'number' ? typeMap['number'].color : '',
197
217
  show: typeof key === 'string',
package/esm/value.js CHANGED
@@ -124,32 +124,36 @@ export function ValueView(props) {
124
124
  show: showTools,
125
125
  text: value
126
126
  }) : undefined;
127
- var mouseEnter = () => setShowTools(true);
128
- var mouseLeave = () => setShowTools(false);
127
+ var eventProps = {};
128
+ if (enableClipboard) {
129
+ eventProps.onMouseEnter = () => setShowTools(true);
130
+ eventProps.onMouseLeave = () => setShowTools(false);
131
+ }
129
132
  if (content && typeof content === 'string') {
130
- var valueView = renderValue ? renderValue({
133
+ var reView = renderValue && renderValue({
131
134
  className: 'w-rjv-value',
132
135
  style: _extends({
133
136
  color
134
137
  }, style),
135
138
  type,
136
- children: content
137
- }) : /*#__PURE__*/_jsx(Label, {
139
+ content,
140
+ children: value
141
+ });
142
+ var valueView = reView ? reView : /*#__PURE__*/_jsx(Label, {
138
143
  color: color,
139
144
  style: style,
140
145
  className: "w-rjv-value",
141
146
  children: content
142
147
  });
143
- return /*#__PURE__*/_jsx(Line, {
148
+ return /*#__PURE__*/_jsx(Line, _extends({
144
149
  style: {
145
150
  paddingLeft: indentWidth
146
- },
147
- onMouseEnter: mouseEnter,
148
- onMouseLeave: mouseLeave,
151
+ }
152
+ }, eventProps, {
149
153
  children: /*#__PURE__*/_jsxs(Label, _extends({}, reset, {
150
154
  children: [renderKey, /*#__PURE__*/_jsx(Colon, {}), typeView, valueView, tools]
151
155
  }))
152
- });
156
+ }));
153
157
  }
154
158
  var length = Array.isArray(value) ? value.length : Object.keys(value).length;
155
159
  var empty = /*#__PURE__*/_jsxs(Fragment, {
@@ -164,16 +168,15 @@ export function ValueView(props) {
164
168
  children: [length, " items"]
165
169
  })]
166
170
  });
167
- return /*#__PURE__*/_jsx(Line, {
171
+ return /*#__PURE__*/_jsx(Line, _extends({
168
172
  style: {
169
173
  paddingLeft: indentWidth
170
- },
171
- onMouseEnter: mouseEnter,
172
- onMouseLeave: mouseLeave,
174
+ }
175
+ }, eventProps, {
173
176
  children: /*#__PURE__*/_jsxs(Label, _extends({}, reset, {
174
177
  children: [renderKey, /*#__PURE__*/_jsx(Colon, {}), typeView, empty, tools]
175
178
  }))
176
- });
179
+ }));
177
180
  }
178
181
  export var Label = _ref2 => {
179
182
  var {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uiw/react-json-view",
3
- "version": "1.0.0",
3
+ "version": "1.1.1",
4
4
  "description": "JSON viewer for react.",
5
5
  "main": "cjs/index.js",
6
6
  "module": "esm/index.js",
@@ -53,13 +53,25 @@
53
53
  "esm"
54
54
  ],
55
55
  "keywords": [
56
- "monaco-editor",
57
- "monaco-nginx",
58
- "nginx",
59
- "monaco",
60
- "editor",
61
- "editor-nginx",
62
- "monaco-editor-nginx"
56
+ "array-viewer",
57
+ "component",
58
+ "interactive",
59
+ "interactive-json",
60
+ "json",
61
+ "json-component",
62
+ "json-display",
63
+ "json-tree",
64
+ "json-view",
65
+ "json-viewer",
66
+ "json-inspector",
67
+ "json-tree",
68
+ "react",
69
+ "react-component",
70
+ "react-json",
71
+ "theme",
72
+ "tree",
73
+ "tree-view",
74
+ "treeview"
63
75
  ],
64
76
  "devDependencies": {
65
77
  "react": "^18.2.0",