{
console.log("keyName", keyName)
console.log("value", value)
console.log("parentValue", parentValue)
}}
/>
)
}}
/>
)
}
```
## Highlight Updates
```tsx mdx:preview
import React, { useState, useEffect } from 'react';
import JsonView from '@uiw/react-json-view';
const object = {
string: 'Lorem ipsum dolor sit amet',
integer: 42,
timer: 0,
object: { 'first-child': true, 'second-child': false, 'last-child': null },
}
export default function Demo() {
const [src, setSrc] = useState({ ...object })
useEffect(() => {
const loop = () => {
setSrc(src => ({
...src,
timer: src.timer + 1
}))
}
const id = setInterval(loop, 1000)
return () => clearInterval(id)
}, []);
return (
)
}
```
This feature can be disabled with `highlightUpdates={false}`, and the default color can be changed with `--w-rjv-update-color`.
## Do not display array index
```tsx mdx:preview
import React, { Fragment } from 'react';
import JsonView from '@uiw/react-json-view';
export default function Demo() {
const value = { data: ["123", 23] }
return (
{
if (Array.isArray(parentValue) && props.children == ":") {
return
}
return
}}/>
{
if (Array.isArray(parentValue) && Number.isFinite( props.children)) {
return
}
return
}}
/>
)
}
```
## Default Collapse/Expand
Determines whether the node should be expanded on the first render. The default value of `collapsed` is `false`.
If both `collapsed` and `shouldExpandNodeInitially` are set, `collapsed` takes precedence; `shouldExpandNodeInitially` only takes effect when `collapsed` is `false`.
```tsx mdx:preview
import React, { useState } from 'react';
import JsonView from '@uiw/react-json-view';
const object = {
string: 'Lorem ipsum dolor sit amet',
integer: 42,
float: 114.514,
object: {
'first-child': true,
'second-child': false,
'last-child': null,
},
nestedArray: [
[1, 2],
[3, 4],
],
}
export default function Demo() {
const [collapsed, setCollapsed] = useState(false)
return (
<>
setCollapsed(e.target.checked)} />
{
if (keys.length > 0 && keys[0] == "object") {
return false
}
return isExpanded
}}
style={{
'--w-rjv-background-color': '#ffffff',
}}
>
)
}
```
## Modify Icon Style
Use built-in default icons.
```tsx mdx:preview
import React from 'react';
import JsonView from '@uiw/react-json-view';
import { TriangleArrow } from '@uiw/react-json-view/triangle-arrow';
import { TriangleSolidArrow } from '@uiw/react-json-view/triangle-solid-arrow';
const object = {
string: 'Lorem ipsum dolor sit amet',
integer: 42,
float: 114.514,
object: {
'first-child': true,
'second-child': false,
'last-child': null,
},
nestedArray: [
[1, 2],
[3, 4],
],
}
export default function Demo() {
return (
)
}
```
Display of custom **svg** `icon` components
```tsx mdx:preview
import React from 'react';
import JsonView from '@uiw/react-json-view';
import { TriangleArrow } from '@uiw/react-json-view/triangle-arrow';
import { TriangleSolidArrow } from '@uiw/react-json-view/triangle-solid-arrow';
const object = {
string: 'Lorem ipsum dolor sit amet',
integer: 42,
float: 114.514,
object: {
'first-child': true,
'second-child': false,
'last-child': null,
},
nestedArray: [
[1, 2],
[3, 4],
],
}
export default function Demo() {
return (
{
const svgProps = {
style: {
cursor: 'pointer', height: '1em', width: '1em', marginRight: 5, userSelect: 'none'
},
fill: "var(--w-rjv-arrow-color, currentColor)"
}
if (!isExpanded) {
return (
);
}
return (
);
}}
/>
);
}
```
## Props
Migrate from JSON View v1 to v2. The new v2 version has removed the ~~`quotes`~~ and ~~`components`~~ props.
```diff
export interface JsonViewProps
extends React.DetailedHTMLProps, HTMLDivElement> {
- quotes?: "'" | '"' | '';
- components?: {};
}
```
```ts
export interface JsonViewProps extends React.DetailedHTMLProps, HTMLDivElement> {
/** This property contains your input JSON */
value?: T;
/** Define the root node name. @default undefined */
keyName?: string | number;
/** Whether sort keys through `String.prototype.localeCompare()` @default false */
objectSortKeys?: boolean | ((keyA: string, keyB: string, valueA: T, valueB: T) => number);
/** Set the indent-width for nested objects @default 15 */
indentWidth?: number;
/** When set to `true`, `objects` and `arrays` are labeled with size @default true */
displayObjectSize?: boolean;
/** When set to `true`, data type labels prefix values @default true */
displayDataTypes?: boolean;
/** The user can copy objects and arrays to clipboard by clicking on the clipboard icon. @default true */
enableClipboard?: boolean;
/** 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;
/** Determine whether the node should be expanded on the first render, or you can use collapsed to control the level of expansion (by default, the root is expanded). */
shouldExpandNodeInitially?: ShouldExpandNodeInitially;
/** Whether to highlight updates. @default true */
highlightUpdates?: boolean;
/** Shorten long JSON strings, Set to `0` to disable this feature @default 30 */
shortenTextAfterLength?: number;
/** When the text exceeds the length, `...` will be displayed. Currently, this `...` can be customized. @default "..." */
stringEllipsis?: number;
/** Callback function for when a treeNode is expanded or collapsed */
onExpand?: (props: { expand: boolean; value?: T; keyid: string; keyName?: string | number }) => void;
/** Fires event when you copy */
onCopied?: (text: string, value?: T) => void;
}
export type ShouldExpandNodeInitially = (isExpanded: boolean, props: {
keyName?: string | number;
value?: T;
parentValue?: T;
keys: (number | string)[];
level: number;
}) => boolean;
```
```ts
import { BraceLeft } from './symbol/BraceLeft';
import { BraceRight } from './symbol/BraceRight';
import { BracketsLeft } from './symbol/BracketsLeft';
import { BracketsRight } from './symbol/BracketsRight';
import { Arrow } from './symbol/Arrow';
import { Colon } from './symbol/Colon';
import { Quote } from './symbol/Quote';
import { ValueQuote } from './symbol/ValueQuote';
import { Bigint } from './types/Bigint';
import { Date } from './types/Date';
import { False } from './types/False';
import { Float } from './types/Float';
import { Int } from './types/Int';
import { Map } from './types/Map';
import { Nan } from './types/Nan';
import { Null } from './types/Null';
import { Set } from './types/Set';
import { StringText } from './types/String';
import { True } from './types/True';
import { Undefined } from './types/Undefined';
import { Url } from './types/Url';
import { Copied } from './section/Copied';
import { CountInfo } from './section/CountInfo';
import { CountInfoExtra } from './section/CountInfoExtra';
import { Ellipsis } from './section/Ellipsis';
import { KeyName } from './section/KeyName';
import { Row } from './section/Row';
type JsonViewComponent = React.FC>> & {
BraceLeft: typeof BraceLeft;
BraceRight: typeof BraceRight;
BracketsLeft: typeof BracketsLeft;
BracketsRight: typeof BracketsRight;
Arrow: typeof Arrow;
Colon: typeof Colon;
Quote: typeof Quote;
ValueQuote: typeof ValueQuote;
Bigint: typeof Bigint;
Date: typeof Date;
False: typeof False;
Float: typeof Float;
Int: typeof Int;
Map: typeof Map;
Nan: typeof Nan;
Null: typeof Null;
Set: typeof Set;
String: typeof StringText;
True: typeof True;
Undefined: typeof Undefined;
Url: typeof Url;
Copied: typeof Copied;
CountInfo: typeof CountInfo;
CountInfoExtra: typeof CountInfoExtra;
Ellipsis: typeof Ellipsis;
KeyName: typeof KeyName;
Row: typeof Row;
};
declare const JsonView: JsonViewComponent;
export default JsonView;
```
## Size and dependencies
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)):
| Library | Bundle size (gzip) | Deps | Last commit | Download | Editable | Demo |
| ------- | ------- | ------- | ------- | ------- | ------- | ------- |
| **[@uiw/react-json-view](https://github.com/uiwjs/react-json-view)** | [](https://bundlephobia.com/result?p=@uiw/react-json-view) [](https://bundlephobia.com/result?p=@uiw/react-json-view) | [](https://bundlephobia.com/result?p=@uiw/react-json-view) | [](https://github.com/uiwjs/react-json-view/commits) | [](https://www.npmjs.com/package/@uiw/react-json-view) | β
| [demo](https://uiwjs.github.io/react-json-view/) |
| [react-json-view-lite](https://github.com/anyroad/react-json-view-lite) | [](https://bundlephobia.com/result?p=react-json-view-lite) [](https://bundlephobia.com/result?p=react-json-view-lite) | [](https://bundlephobia.com/result?p=react-json-view-lite) | [](https://github.com/AnyRoad/react-json-view-lite/commits) | [](https://www.npmjs.com/package/react-json-view-lite) | β | [demo](https://anyroad.github.io/react-json-view-lite/) |
| [react-json-pretty](https://github.com/chenckang/react-json-pretty) | [](https://bundlephobia.com/result?p=react-json-pretty) [](https://bundlephobia.com/result?p=react-json-pretty) | [](https://bundlephobia.com/result?p=react-json-pretty) | [](https://github.com/chenckang/react-json-pretty/commits) | [](https://www.npmjs.com/package/react-json-pretty) | β | - |
| [~~react-json-inspector~~](https://github.com/Lapple/react-json-inspector) | [](https://bundlephobia.com/result?p=react-json-inspector) [](https://bundlephobia.com/result?p=react-json-inspector) | [](https://bundlephobia.com/result?p=react-json-inspector) | [](https://github.com/Lapple/react-json-inspector/commits) | [](https://www.npmjs.com/package/react-json-inspector) | β | [demo](https://lapple.github.io/react-json-inspector/)
| [react-json-tree](https://github.com/reduxjs/redux-devtools/tree/main/packages/react-json-tree) | [](https://bundlephobia.com/result?p=react-json-tree) [](https://bundlephobia.com/result?p=react-json-tree) | [](https://bundlephobia.com/result?p=react-json-tree) | [](https://github.com/reduxjs/redux-devtools/commits) | [](https://www.npmjs.com/package/react-json-tree) | β |
| ~~[react-json-view](https://github.com/mac-s-g/react-json-view)~~ | [](https://bundlephobia.com/result?p=react-json-view) [](https://bundlephobia.com/result?p=react-json-view) | [](https://bundlephobia.com/result?p=react-json-view) | [](https://github.com/mac-s-g/react-json-view/commits) | [](https://www.npmjs.com/package/react-json-view) | β
| [demo](https://mac-s-g.github.io/react-json-view/demo/dist/) |
| [react-inspector](https://github.com/storybookjs/react-inspector) | [](https://bundlephobia.com/result?p=react-inspector) [](https://bundlephobia.com/result?p=react-inspector) | [](https://bundlephobia.com/result?p=react-inspector) | [](https://github.com/storybookjs/react-inspector/commits) | [](https://www.npmjs.com/package/react-inspector) | β | [demo](https://react-inspector.netlify.app/) |
| [react-domify](https://github.com/JedWatson/react-domify) | [](https://bundlephobia.com/result?p=react-domify) [](https://bundlephobia.com/result?p=react-domify) | [](https://bundlephobia.com/result?p=react-domify) | [](https://github.com/JedWatson/react-domify/commits) | [](https://www.npmjs.com/package/react-domify) | β | [demo](https://jedwatson.github.io/react-domify/) |
| [react18-json-view](https://github.com/YYsuni/react18-json-view) | [](https://bundlephobia.com/result?p=react18-json-view) [](https://bundlephobia.com/result?p=react18-json-view) | [](https://bundlephobia.com/result?p=react18-json-view) | [](https://github.com/YYsuni/react18-json-view/commits) | [](https://www.npmjs.com/package/react18-json-view) | β | [demo](https://jv.yysuni.com/) |
| [@textea/json-viewer](https://github.com/TexteaInc/json-viewer) | [](https://bundlephobia.com/result?p=@textea/json-viewer) [](https://bundlephobia.com/result?p=@textea/json-viewer) | [](https://bundlephobia.com/result?p=@textea/json-viewer) | [](https://github.com/TexteaInc/json-viewer/commits) | [](https://www.npmjs.com/package/@textea/json-viewer) | β
| [demo](https://stackblitz.com/edit/textea-json-viewer-v3-b4wgxq) |
| [react-editable-json-tree](https://github.com/oxyno-zeta/react-editable-json-tree) | [](https://bundlephobia.com/result?p=react-editable-json-tree) [](https://bundlephobia.com/result?p=react-editable-json-tree) | [](https://bundlephobia.com/result?p=react-editable-json-tree) | [](https://github.com/oxyno-zeta/react-editable-json-tree/commits) | [](https://www.npmjs.com/package/react-editable-json-tree) | β
| [demo](https://oxyno-zeta.github.io/react-editable-json-tree/) |
| [react-json-view](https://github.com/HuolalaTech/react-json-view) | [](https://bundlephobia.com/result?p=@huolala-tech/react-json-view) [](https://bundlephobia.com/result?p=@huolala-tech/react-json-view) | [](https://bundlephobia.com/result?p=@huolala-tech/react-json-view) | [](https://github.com/HuolalaTech/react-json-view/commits) | [](https://www.npmjs.com/package/@huolala-tech/react-json-view) | β | [demo](https://huolalatech.github.io/react-json-view/) |
## Development
Runs the project in development mode.
```bash
# Step 1, run first, listen to the component compile and output the .js file
# listen for compilation output type .d.ts file
npm run watch
# Step 2, development mode, listen to compile preview website instance
npm run start
```
Builds the app for production to the build folder.
```bash
npm run build
```
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
## Contributors
As always, thanks to our amazing contributors!
Made with [contributors](https://github.com/jaywcjlove/github-action-contributors).
## License
Licensed under the MIT License.
