json-visual v1.0.3

JSON-Visual

A versatile React component for rendering JSON data effortlessly. This package allows developers to easily integrate dynamic JSON display within their React applications, providing clear and customizable visualization options for various data structures.

Installation

npm install json-visual

Usage

jsx
import JsonRender  from 'json-visual';

const json = {
  "name": "John Doe",
  "age": 30,
  "occupation": "Software Engineer"
};

const App = () => {
  return (
    <JsonRender
      json={json}
      keyColor="#007bff"
      valueColor="#28a745"
      background="#f8f9fa"
      hideTypes={false}
    />
  );
};

Props

Component

JsonRender

Renders a JSON object in a UI-friendly format.

Example

jsx
<JsonRender
  json={{
    "name": "Jane Doe",
    "age": 25,
    "occupation": "Data Scientist"
  }}
  keyColor="#ff69b4"
  valueColor="#33b5e5"
  background="#2f3436"
  hideTypes={true}
/>

This will render the JSON object in a formatted UI with the specified colors and background.