{
string: "string"
number: 123456
boolean: false
null: null
func: function() {}
Symbol: Symbol(JSON View)
obj: {
k1: 123
k2: "123"
k3: false
}
arr: []
}

JsonView

JSON-like viewer for react18.

GithubDemo

Installation

npm i react18-json-view

Usage

import JsonView from 'react18-json-view'
import 'react18-json-view/src/style.css'
// If dark mode is needed, import `dark.css`.
// import 'react18-json-view/src/dark.css'
	
<JsonView src={json_object} />
	
// If needed, you can use the internal stringify function.
// import { stringify } from 'react18-json-view'

Themes

Recommend backgroundColor: #FFFFFF
<JsonView src={json_object} theme="default" />
{
string: "string"
number: 123456
boolean: false
null: null
func: function() {}
Symbol: Symbol(JSON View)
obj: {
k1: 123
k2: "123"
k3: false
}
arr: []
}

Custom themes

Below are the default theme variables that you can easily customize to fit your needs.

.json-view {
  color: #4d4d4d;
  --json-property: #009033;
  --json-index: #676dff;
  --json-number: #676dff;
  --json-string: #b2762e;
  --json-boolean: #dc155e;
  --json-null: #dc155e;
}

Collapsed

<JsonView src={json_object} collapsed={1}  />
{
string: "string"
number: 123456
boolean: false
null: null
func: function() {}
Symbol: Symbol(JSON View)
obj: {}
arr: []
nest: {}
largeArr: []
}

Collapse String

<JsonView 
  editable
  src={json_object} 
  collapseStringMode="directly" 
  collapseStringsAfterLength={20}
/>
{
Interstellar: "And we count these m..."
Yasuo: "Just looking for a r..."
Yone: "风中传来苦咸，是悔恨的气味吗？弟弟，疾风..."
ルフィ: "オレはいつかこの一味にも负けない仲间を集..."
Поб ег из Шоуш енка: "Это заб авные стен ы..."
π: "3.141592653589793238..."
hash: "0xc12d04188e98f4e511..."
code: ""use strict"; (()=>{..."
multiSpaces: " blank tab lf ..."
}

Display Size

<JsonView src={json_object} displaySize={true} />
{8 Items
string: "string"
number: 123456
boolean: false
null: null
func: function() {}
Symbol: Symbol(JSON View)
obj: {4 Items
k1: 123
k2: "123"
k3: false
nest: {1 Items
nest: {1 Items
nest: {1 Items
over: "over"
}
}
}
}
arr: [4 Items
0: "string"
1: 123456
2: false
3: [2 Items
0: "nest"
1: [1 Items
0: "over"
]
]
]
}

Display Array Index (Canary)

<JsonView src={json_object} displayArrayIndex={true} />
{
string: "string"
number: 123456
boolean: false
null: null
func: function() {}
Symbol: Symbol(JSON View)
obj: {
k1: 123
k2: "123"
k3: false
nest: {
nest: {
nest: {
over: "over"
}
}
}
}
arr: [
0: "string"
1: 123456
2: false
3: [
0: "nest"
1: [
0: "over"
]
]
]
}

Editable

<JsonView
  editable
  onAdd={params => {
    console.log('[jv onAdd]', params)
  }}
  onEdit={params => {
    console.log('[jv onEdit]', params)
  }}
  onDelete={params => {
    console.log('[jv onDelete]', params)
  }}
  src={{json_object}}
/>
{
string: "string"
number: 123456
boolean: false
null: null
func: function() {}
Symbol: Symbol(JSON View)
obj: {
k1: 123
k2: "123"
k3: false
nested: {
k4: "nested"
}
}
arr: [
0: "string"
1: 123456
2: false
3: null
]
largeArr: [
[]
[]
[]
[]
[]
[]
[]
[]
[]
[]
]
}

How to generate object/array

The editor uses eval (<input-value>). While in edit mode, you can enter({}) or ([]), which will cause the result of eval to become a new object or array.

`` and `[]` will be auto convert to `()`,`([])`

canary: eval => JSON.parse

How the editor works

This component does not perform any cloning operations, so every step of the operation is carried out on the original object. If cloning is required, please handle it yourself.

Edit keyboard shortcuts

When element is editable:

Advanced customization

<JsonView
  editable
  customizeNode={params => {
    if (params.indexOrName === 'obj') return { add: false, delete: false, enableClipboard: false }
    if (params.node === 'no-clipboard') return { enableClipboard: false }
    if (params.node === 'non-delete') return { delete: false }
    if (params.node === 'non-editable') return { add: false, delete: false, edit: false }
    if (params.indexOrName === 'arr') return { collapsed: false }
    if (params.depth > 2) return { collapsed: true }
    if (params.indexOrName === 'className') return { className: 'underline' }
    if (params.indexOrName === 'collapsed') return { collapsed: true }
    if (params.node === 'count')
      return () => {
        const [count, setCount] = useState(0)

        return (
          <span>
            {count}
            <button onClick={() => setCount(count + 1)} className='border ml-1 px-1 py-0.5'>
              add
            </button>
          </span>
        )
      }
    if (typeof params.node === 'string' && params.node.startsWith('https://'))
      return (
        <a href={params.node} target='_blank' className='text-sky-500 hover:underline'>
          {params.node}
        </a>
      )
  }}
  src={{json_object}}
/>
{
count: 0
link: https://github.com/YYsuni/react18-json-view
number: 123456
no-clipboard: "no-clipboard"
non-delete: "non-delete"
non-editable: "non-editable"
className: "className"
collapsed: {}
arr: [
0: "string"
1: 123456
2: false
3: null
4: []
]
}