react-json-view-lite

react-json-view-lite is a tiny component for React allowing to render JSON as a tree. It focused on the balance between performance for large JSON inputs and functionality. It might not have all the rich features (suce as customization, copy, json editinng) but still provides more than just rendering json with highlighting - e.g. ability to collapse/expand nested objects and override css. It is written in TypeScript and has no dependencies.

Install

npm install --save react-json-view-lite

Usage

import * as React from 'react';

import { JsonView, darkStyles, defaultStyles } from 'react-json-view-lite';
import 'react-json-view-lite/dist/index.css';

const json = {
  a: 1,
  b: 'example'
};

const App = () => {
  return (
    <React.Fragment>
      <JsonView data={json} shouldInitiallyExpand={(level) => true} style={defaultStyles} />
      <JsonView data={json} shouldInitiallyExpand={(level) => true} style={darkStyles} />
    </React.Fragment>
  );
};

export default App;

StoryBook

https://anyroad.github.io/react-json-view-lite/

Demo

https://codesandbox.io/s/react-json-view-lite-example-wvdjl

(thanks to @idindrakusuma)

Props

Name	Type	Default Value	Description
data	Object | Array<any>		Data which should be rendered
style	StyleProps	defaultStyles	Optional. CSS classes for rendering. Library provides two build-in implementations: darkStyles, defaultStyles (see below)
shouldInitiallyExpand	(level: number, value: any, field?: string) => boolean	allExpanded	Optional. Function which will be initially called for each Object and Array of the data in order to calculate should if this node be expanded. level startes from 0, field does not have a value for the array element. Library provides two build-in implementations: allExpanded and collapseAllNested (see below)

Extra exported

Name	Type	Description
defaultStyles	StyleProps	Default styles for light background
darkStyles	StyleProps	Default styles for dark background
allExpanded	() => boolean	Always returns true
collapseAllNested	(level: number) => boolean	Returns true only for the first level (level=0)

StyleProps

Name	Type	Description
container	string	CSS class name for rendering parent block
basicChildStyle	string	CSS class name for property block containing property name and value
expander	string	CSS class name for rendering button expanding/collapsing Object and Array nodes
label	string	CSS class name for rendering property names
nullValue	string	CSS class name for rendering null values
undefinedValue	string	CSS class name for rendering undefined values
numberValue	string	CSS class name for rendering numeric values
stringValue	string	CSS class name for rendering string values
booleanValue	string	CSS class name for rendering boolean values
otherValue	string	CSS class name for rendering all other values except Object, Arrray, null, undefined, numeric, boolean and string
punctuation	string	CSS class name for rendering ,, [, ], {, }, ...
pointer	string	extra CSS class name for parts which are used for expanding/collapsing: ▸, ▾ and ...

Comparison with other libraries

Size and dependencies

Here is the size benchmark (using bundlephobia.com) against similar React libraries (found by https://www.npmjs.com/search?q=react%20json&ranking=popularity):

Library	Bundle size	Bundle size (gzip)	Dependencies
react-json-view-lite
react-json-pretty
react-json-inspector
react-json-tree
react-json-view
react-json-tree-viewer

Performance

Performance was mesaures using the react-component-benchmark library. Every component was rendered 50 times using the 300Kb json file as data source. All numbers are in milliseconds. Tests were performed on Macbook Air M1 16Gb RAM usging Chrome v96.0.4664.110(official build, arm64). Every component was tested 2 times but there was no significant differences in the results.

Library	Min	Max	Average	Median	P90
react-json-view-lite	81	604	195	82	582
react-json-pretty	22	59	32	24	56
react-json-inspector	682	1 109	758	711	905
react-json-tree	565	1 217	658	620	741
react-json-view	1 403	1 722	1529	1 540	1 631
react-json-tree-viewer	266	663	320	278	455

As you can see react-json-pretty renders faster than other libraries but it does not have ability to collapse/expand nested objects so it might be good choice if you need just json syntax highlighting.

License

MIT © AnyRoad

Changelog

0.9.7

New Features

• Added BigInt rendering support