Usage no npm install needed!

<script type="module">
  import reactJsonTreeViewer from 'https://cdn.skypack.dev/react-json-tree-viewer';
</script>

README

react-json-tree-viewer

import Rjv from 'react-json-tree-viewer'

const json = {
  array: [1, 2, 3],
  bool: true,
  object: {
    foo: 'bar'
  }
}

<Rjv data={json} />

Name	Type	Default	Description
data	object/array	{}	json data
hideRoot	boolean	false	if show root
shouldExpandNode	(path: string[], data: any) => boolean	null	if expand object or array in first render
onArrowClick	(path: string[], expanded: boolean) => void	null	hanle arrow click
labelRenderer	(keyName: string) => JSX.Element	null	custom render label
valueRenderer	(data: any) => JSX.Element	null	custom render value
typeRenderer	(data: any) => JSX.Element	null	custom type laber
arrowStyle	React css Properties	null	custom arrow style