github.com/AnyRoad/react-json-view-lite @2.5.0

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

Version 2.x.x

Versions 2.x.x supports only React 18 and later. Please use 1.5.0 if your project uses React 16 or 17. Also version 2 provides better a11y support, collapsing/expanding and navigation through nested elements using arrow keys ("Space" button does not collapse/expand element anymore), but library size increased about 20%. If your project uses custom styles you will need to add the css for the childFieldsContainer property like below:

.child-fields-container {
  margin: 0;
  padding: 0;
}

because implementation uses ul element div instead of the elemenent according to the w3.org example.

Migration from the 0.9.x versions

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:
3. pointer and expander are no longer used
4. 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.

Usage

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.

StoryBook

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

Props

interface NodeExpandingEvent

interface AriaLabels

Extra exported

StyleProps

Comparison with other libraries