{"library":"react-json-view","title":"React JSON View Component","description":"React JSON View (RJV) is an interactive React component designed for displaying and optionally editing JavaScript arrays and JSON objects within web applications. The version provided (1.21.3) from the `mac-s-g/react-json-view` repository has announced it is no longer actively maintained. However, an actively maintained fork exists at `@microlink/react-json-view`, which offers ongoing updates, performance improvements, and additional features, including full TypeScript support and a redesigned API in its v2. The original `mac-s-g` version is transpiled to ES5, ensuring broad compatibility. Key differentiators of both versions include extensive theme support (base-16), customizable expand/collapse behavior, optional editing features via callbacks, clipboard functionality, and various display options for data types and object sizes.","language":"javascript","status":"maintenance","last_verified":"Sun Apr 19","install":{"commands":["npm install react-json-view"],"cli":null},"imports":["import ReactJson from 'react-json-view'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport ReactJson from 'react-json-view';\n\nfunction MyJsonViewer() {\n  const [jsonData, setJsonData] = useState({\n    id: 1,\n    name: 'Sample Product',\n    price: 29.99,\n    inStock: true,\n    tags: ['electronics', 'gadget', 'sale'],\n    details: {\n      manufacturer: 'TechCorp',\n      weight: '1.5 kg',\n      dimensions: { width: '10cm', height: '5cm', depth: '2cm' }\n    },\n    reviews: [\n      { user: 'Alice', rating: 5, comment: 'Great product!' },\n      { user: 'Bob', rating: 4, comment: 'Good value for money.' }\n    ],\n    lastUpdated: new Date().toISOString()\n  });\n\n  const handleEdit = (edit) => {\n    console.log('JSON Edited:', edit);\n    // In a real app, you would typically update your state or send to an API\n    // For this example, we'll update the local state if onEdit is used.\n    setJsonData(edit.updated_src);\n  };\n\n  return (\n    <div style={{ fontFamily: 'sans-serif', padding: '20px' }}>\n      <h2>Interactive JSON Viewer</h2>\n      <p>This component displays and allows modification of JSON objects.</p>\n      <ReactJson\n        src={jsonData}\n        name=\"productData\"\n        theme=\"monokai\"\n        iconStyle=\"triangle\"\n        collapsed={1} // Collapse objects at depth 1 by default\n        enableClipboard={true}\n        displayObjectSize={true}\n        displayDataTypes={false}\n        onEdit={handleEdit}\n        onAdd={handleEdit} // Enable add functionality\n        onDelete={handleEdit} // Enable delete functionality\n        indentWidth={4}\n        groupArraysAfterLength={5}\n      />\n      <div style={{ marginTop: '20px', backgroundColor: '#f0f0f0', padding: '15px' }}>\n        <h3>Current State (JSON.stringify):</h3>\n        <pre>{JSON.stringify(jsonData, null, 2)}</pre>\n      </div>\n    </div>\n  );\n}\n\nexport default MyJsonViewer;","lang":"javascript","description":"Demonstrates how to integrate `ReactJson` into a functional React component, displaying a sample JSON object with various data types. It shows how to enable editing, adding, and deleting properties using the `onEdit`, `onAdd`, and `onDelete` callbacks, and configures several display options like themes, collapse depth, and data types.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}