react-json-view-lite

Size Comparison

react-json-view-lite is designed to be lightweight compared to other popular React JSON viewers like react-json-inspector or react-json-view.

Performance

Performance was measured using react-component-benchmark with a 300Kb JSON file. While react-json-pretty is faster, it lacks the ability to collapse/expand nested objects. react-json-view-lite provides a balance of performance and interactive features.

React Version Compatibility

• Version 2.x.x: Requires React 18 or later.
• Version 1.5.0: Use this version if your project uses React 16 or 17.

Version 2 Improvements

• Better accessibility (a11y) support.
• Improved navigation through nested elements using arrow keys.
• Note: The Space button no longer collapses/expands elements in v2.
• Library size has increased by approximately 20% compared to v1.

Custom Styling in v2

Because the implementation uses a div instead of a ul for the childFieldsContainer (following W3C treeview patterns), you may need to reset margins/padding in your CSS:

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

If you are upgrading from version 0.9.x, note the following breaking changes:

1. Prop Renaming: shouldInitiallyExpand is now shouldExpandNode. This change emphasizes that the function is called every time properties change.
2. Custom Styling Changes:
   • pointer and expander props are no longer used.
   • To customize expand/collapse icons and collapsed content placeholders (previously hardcoded to ▸, ▾, and ...), use the collapseIcon, expandIcon, and collapsedContent styles. These use ::after pseudo-classes to set content.

Install the package using npm to add the JSON tree viewer to your React project.

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

To use react-json-view-lite, import the JsonView component and its associated CSS. You can use built-in styles like defaultStyles or darkStyles.

Important: If you pass a function to shouldExpandNode, wrap it in a useCallback or define it outside your component to prevent unnecessary re-renders, as anonymous functions are recreated on every render.

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;

The NodeExpandingEvent object contains the following fields:

Use the ariaLables prop to provide custom aria-label text for the interactive buttons in the JSON viewer, improving accessibility for screen readers.

The library exports several utilities for managing expansion states and pre-defined styles:

Styles

• defaultStyles: StyleProps object for light backgrounds.
• darkStyles: StyleProps object for dark backgrounds.

Expansion Logic

• allExpanded: A function () => boolean that always returns true (useful for forcing all nodes to be open).
• collapseAllNested: A function (level: number) => boolean that returns true only for the first level (level=0).

import { defaultStyles, darkStyles, allExpanded, collapseAllNested } from 'react-json-view-lite';