{string: "string"number: 123456boolean: falsenull: nullfunc: function() {}Symbol: Symbol(JSON View)obj: {k1: 123k2: "123"k3: false}arr: []}
JsonView
JSON-like viewer for react18.
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
- default
- a11y
- github
- vscode
- atom
- winter-is-coming
Recommend backgroundColor: #FFFFFF
<JsonView src={json_object} theme="default" />
{string: "string"number: 123456boolean: falsenull: nullfunc: function() {}Symbol: Symbol(JSON View)obj: {k1: 123k2: "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
- 0
- 1
- 2
- 3
- true
- false
- function
- ignoreLargeArray
<JsonView src={json_object} collapsed={1} />
{string: "string"number: 123456boolean: falsenull: nullfunc: function() {}Symbol: Symbol(JSON View)obj: {}arr: []nest: {}largeArr: []}
Collapse String
- directly
- word
- address
<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
- true
- false
- 0
- 1
- 2
- 3
- collapsed
- expanded
<JsonView src={json_object} displaySize={true} />
{8 Itemsstring: "string"number: 123456boolean: falsenull: nullfunc: function() {}Symbol: Symbol(JSON View)obj: {4 Itemsk1: 123k2: "123"k3: falsenest: {1 Itemsnest: {1 Itemsnest: {1 Itemsover: "over"}}}}arr: [4 Items0: "string"1: 1234562: false3: [2 Items0: "nest"1: [1 Items0: "over"]]]}
Display Array Index (Canary)
- true
- false
<JsonView src={json_object} displayArrayIndex={true} />
{string: "string"number: 123456boolean: falsenull: nullfunc: function() {}Symbol: Symbol(JSON View)obj: {k1: 123k2: "123"k3: falsenest: {nest: {nest: {over: "over"}}}}arr: [0: "string"1: 1234562: false3: [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: 123456boolean: falsenull: nullfunc: function() {}Symbol: Symbol(JSON View)obj: {k1: 123k2: "123"k3: false}arr: [0: "string"1: 1234562: false3: 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:
Ctrl/Cmd+Click
=> Edit ModeEnter
=> SubmitEsc
=> Cancel
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: 0number: 123456no-clipboard: "no-clipboard"non-delete: "non-delete"non-editable: "non-editable"className: "className"collapsed: {}arr: [0: "string"1: 1234562: false3: null4: []]}