@uiw/react-json-view 1.1.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 (6) hide show
  1. package/README.md +43 -1
  2. package/cjs/node.js +1 -1
  3. package/cjs/value.js +5 -3
  4. package/esm/node.js +1 -1
  5. package/esm/value.js +5 -3
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -249,7 +249,7 @@ export default function Demo() {
249
249
  displayDataTypes={false}
250
250
  style={{
251
251
  '--w-rjv-background-color': '#ffffff',
252
- '--w-rjv-border-left': '0',
252
+ '--w-rjv-border-left-width': '0',
253
253
  }}
254
254
  components={{
255
255
  braces: () => <span />,
@@ -266,6 +266,45 @@ export default function Demo() {
266
266
  }
267
267
  ```
268
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
+
269
308
  ## Modify Icon Style
270
309
 
271
310
  Use built-in default icons.
@@ -396,6 +435,8 @@ export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttr
396
435
  enableClipboard?: boolean;
397
436
  /** Display for quotes in object-key @default " */
398
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;
399
440
  /** Callback function for when a treeNode is expanded or collapsed */
400
441
  onExpand?: (props: {
401
442
  expand: boolean;
@@ -431,6 +472,7 @@ Here is the size benchmark (using [bundlephobia.com](https://bundlephobia.com))
431
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) |
432
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) |
433
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) |
434
476
 
435
477
  ## Development
436
478
 
package/cjs/node.js CHANGED
@@ -229,7 +229,7 @@ function RooNode(props) {
229
229
  }), tools]
230
230
  }), expand && /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Line, {
231
231
  style: {
232
- 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)',
233
233
  marginLeft: 6
234
234
  },
235
235
  children: nameKeys.length > 0 && nameKeys.map(function (key, idx) {
package/cjs/value.js CHANGED
@@ -152,14 +152,16 @@ function ValueView(props) {
152
152
  };
153
153
  }
154
154
  if (content && typeof content === 'string') {
155
- var valueView = renderValue ? renderValue({
155
+ var reView = renderValue && renderValue({
156
156
  className: 'w-rjv-value',
157
157
  style: (0, _objectSpread2["default"])({
158
158
  color: color
159
159
  }, style),
160
160
  type: type,
161
- children: content
162
- }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
161
+ content: content,
162
+ children: value
163
+ });
164
+ var valueView = reView ? reView : /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
163
165
  color: color,
164
166
  style: style,
165
167
  className: "w-rjv-value",
package/esm/node.js CHANGED
@@ -204,7 +204,7 @@ export function RooNode(props) {
204
204
  }), tools]
205
205
  }), expand && /*#__PURE__*/_jsx(Line, {
206
206
  style: {
207
- 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)',
208
208
  marginLeft: 6
209
209
  },
210
210
  children: nameKeys.length > 0 && nameKeys.map((key, idx) => {
package/esm/value.js CHANGED
@@ -130,14 +130,16 @@ export function ValueView(props) {
130
130
  eventProps.onMouseLeave = () => setShowTools(false);
131
131
  }
132
132
  if (content && typeof content === 'string') {
133
- var valueView = renderValue ? renderValue({
133
+ var reView = renderValue && renderValue({
134
134
  className: 'w-rjv-value',
135
135
  style: _extends({
136
136
  color
137
137
  }, style),
138
138
  type,
139
- children: content
140
- }) : /*#__PURE__*/_jsx(Label, {
139
+ content,
140
+ children: value
141
+ });
142
+ var valueView = reView ? reView : /*#__PURE__*/_jsx(Label, {
141
143
  color: color,
142
144
  style: style,
143
145
  className: "w-rjv-value",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uiw/react-json-view",
3
- "version": "1.1.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",