react-json-view

What is react-json-view?

The react-json-view package is a React component for displaying and editing JSON data in a user-friendly way. It provides a variety of features to manipulate JSON data, including expanding/collapsing nodes, editing values, adding/removing nodes, and more.

What are react-json-view's main functionalities?

Display JSON Data

This feature allows you to display JSON data in a structured and readable format. The JSON data is passed to the `src` prop of the `ReactJson` component.

import React from 'react';
import ReactJson from 'react-json-view';

const App = () => {
  const jsonData = {
    name: "John Doe",
    age: 30,
    address: {
      street: "123 Main St",
      city: "Anytown"
    }
  };

  return <ReactJson src={jsonData} />;
};

export default App;

Edit JSON Data

This feature allows users to edit JSON data directly in the view. The `onEdit` prop is used to handle the edit events, providing the edited data as a parameter.

import React from 'react';
import ReactJson from 'react-json-view';

const App = () => {
  const jsonData = {
    name: "John Doe",
    age: 30,
    address: {
      street: "123 Main St",
      city: "Anytown"
    }
  };

  const handleEdit = (edit) => {
    console.log('Edited:', edit);
  };

  return <ReactJson src={jsonData} onEdit={handleEdit} />;
};

export default App;

Add/Remove JSON Nodes

This feature allows users to add or remove nodes in the JSON data. The `onAdd` and `onDelete` props are used to handle the add and delete events, respectively.

import React from 'react';
import ReactJson from 'react-json-view';

const App = () => {
  const jsonData = {
    name: "John Doe",
    age: 30,
    address: {
      street: "123 Main St",
      city: "Anytown"
    }
  };

  const handleAdd = (add) => {
    console.log('Added:', add);
  };

  const handleDelete = (del) => {
    console.log('Deleted:', del);
  };

  return <ReactJson src={jsonData} onAdd={handleAdd} onDelete={handleDelete} />;
};

export default App;

Expand/Collapse Nodes

This feature allows users to expand or collapse nodes in the JSON data. The `collapsed` prop can be set to `true` to collapse all nodes by default.

import React from 'react';
import ReactJson from 'react-json-view';

const App = () => {
  const jsonData = {
    name: "John Doe",
    age: 30,
    address: {
      street: "123 Main St",
      city: "Anytown"
    }
  };

  return <ReactJson src={jsonData} collapsed={true} />;
};

export default App;

Other packages similar to react-json-view

jsoneditor

The jsoneditor package is a web-based tool to view, edit, format, and validate JSON data. It provides a rich set of features for manipulating JSON data, including a tree view, code view, and text view. Compared to react-json-view, jsoneditor offers more advanced editing capabilities and multiple views for JSON data.

react-json-tree

The react-json-tree package is a React component for rendering JSON data as a tree structure. It focuses on providing a simple and lightweight way to display JSON data. While it does not offer editing capabilities like react-json-view, it is a good choice for read-only JSON data visualization.

react-json-pretty

The react-json-pretty package is a React component for pretty-printing JSON data. It provides a clean and readable format for displaying JSON data. Unlike react-json-view, it does not support editing or interactive features, making it suitable for static JSON data display.

README

react-json-view

Interactive JSON display wrapped up in a react component.

Example Component Display:

Implementation Example:

Features

• Object nodes can be collapsed and expanded
• Different classes are applied to different types for style interaction.

Customizing Style

update or override src/style/_variables.scss to apply your own theme.

Working with the source code:

You can use Docker to run the source code in your browser:

1. Clone this repo
2. Make sure docker is installed
3. Build the docker image * docker build -t react-json-view . * note: you may need to use sudo to run docker commands
4. Run the docker container on port 2000 * cd react-json-view * ./docker/server.sh * note: you may need to use sudo to run the server file
5. open port 2000 in your browser * navigate to localhost:2000

Your source code will be mounted inside the docker container. The container is built on the standard Node image.

Webpack-dev-server is running in the container and hot-reloading when changes are made locally.

All node modules are installed within the container, so make sure to rebuild your container if you make changes to package.json (see step 3, above).

ToDo's

1. Add Tests!
2. move each data type into it's own component

case 'string':
    return <div class="object-value string">
        <span class="data-type">string</span>
        {value}
    </div>;

should become

case 'string':
    return <PrettyString value={value} />;

1. improve customizability
   • add optional depth prop
   • consider moving to postcss
   • add a few different themes on top of _variables.scss
2. add array component supports collapse and expand