React JSON Viewer

React JSON Viewer is a simple and user-friendly React-based application that allows you to visualize JSON data in a collapsible tree structure. This app supports both object literals and array literals, making it easy to navigate and understand complex JSON structures.

Features

• Supports both object and array literals
• Collapsible tree structure for easy navigation
• Expand and collapse nodes using arrow buttons
• Automatically formats JSON data

Getting Started

These instructions will help you set up the project on your local machine for development and testing purposes.

Prerequisites

• Node.js version 12.x or higher
• npm version 6.x or higher

Installation

1. Clone the repository:

git clone https://github.com/yourusername/react-json-viewer.git

2. Change the current directory to the project folder:

cd react-json-viewer

3. Install the dependencies:

npm install

4. Start the development server:

npm start

This will open the app in your default web browser at http://localhost:3000.

Usage

To use the React JSON Viewer component in your own project, simply import it and pass the JSON data as a prop:

import React from "react";
import JsonRenderer from "./JsonRenderer";

const jsonData = {
  "name": "John Doe",
  "age": 30,
  "hobbies": ["reading", "travelling", "programming"]
};

function App() {
  return (
   <div className="App">
     <JsonRenderer json={jsonData} level={1} />
   </div>
  );
}

export default App;

Replace jsonData with your own JSON data.