react-json-editor-viewer

$3

npm i react-json-editor-viewer

$3

``javascript
import {JSONViewer} from 'react-json-editor-viewer';

data={{
the: "men",
that: "landed",
on: "the",
moon: "were",
maybe: 2,
i: "think",
probably: ["neil armstrong", "buzz aldrin"],
am_i_right: true
}}
/>

`
!Alt text

$3

`javascript
import {JSONViewer} from 'react-json-editor-viewer';

data={{
the: "men",
that: "landed",
on: "the",
moon: "were",
maybe: 2,
i: "think",
probably: ["neil armstrong", "buzz aldrin"],
am_i_right: true
}}
collapsible
/>
`

!Alt text

$3

`javascript
import {JSONEditor} from 'react-json-editor-viewer';

constructor(){
this.onJsonChange = this.onJsonChange.bind(this);
}

onJsonChange(key, value, parent, data){
console.log(key, value, parent, data);
}

data={{
the: "men",
that: "landed",
on: "the",
moon: "were",
maybe: 2,
i: "think",
probably: ["neil armstrong", "buzz aldrin"],
am_i_right: true
}}
collapsible
onChange={this.onJsonChange}
/>
`

!Alt text

$3


`javascript
import {JSONEditor} from 'react-json-editor-viewer';

constructor(){
this.onJsonChange = this.onJsonChange.bind(this);
}

onJsonChange(key, value, parent, data){
console.log(key, value, parent, data);
}

data={{
the: "men",
that: "landed",
on: "the",
moon: "were",
maybe: 2,
i: "think",
probably: ["neil armstrong", "buzz aldrin"],
am_i_right: true
}}
collapsible
onChange={this.onJsonChange}
view="dual"
/>
``
!Alt text

$3

See the source for the Demo App

default

!Alt text

override custom styles

!Alt text

$3