react-json-view-lite

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

1. Property shouldInitiallyExpand has different name shouldExpandNode in order to emphasize that it will be called every time properties change.
2. If you use custom styles:
   • pointer and expander are no longer used
   • component uses collapseIcon, expandIcon, collapsedContent styles in order to customize expand/collapse icon and collpased content placeholder which were previously hardcode to the ▸, ▾ and .... Default style values use ::after pseudo-classes to set the content.

import * as React from 'react';

import { JsonView, allExpanded, 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} shouldExpandNode={allExpanded} style={defaultStyles} />
      <JsonView data={json} shouldExpandNode={allExpanded} style={darkStyles} />
    </React.Fragment>
  );
};

export default App;

Please note that in JavaScript, an anonymous function like function() {} or () => {} always creates a different function every time component is rendered, so you might need to use useCallback React Hook for the shouldExpandNode parameter or extract the function outside the functional component.

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

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 was mesaured using the react-component-benchmark library. Every component was rendered 50 times using the 300Kb json file as data source, please refer to source code of the benchmark project. 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.

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.

MIT © AnyRoad