react-jsonviewer-graph

A React component to visualize JSON data as interactive graphs using Reaflow.
This package is integrated with jsonviewer.tools API for API Key verification before rendering.

✨ Features

• Visualize JSON as an interactive graph.
• Pan, zoom, and drag support (powered by Reaflow).
• API key verification via jsonviewer.tools.
• Easy to integrate in any React project.

📦 Installation

npm install react-jsonviewer-graph
# or
yarn add react-jsonviewer-graph

## 🚀 Usage

First, import the component into your React app:

```jsx
import React from "react";
import { JSONGRAPH } from "react-jsonviewer-graph";

const data = {
  name: "User",
  age: 28,
  address: {
    city: "New York",
    zip: "10001"
  }
};

export default function App() {
  return (
    <div style={{ width: "100vw", height: "100vh" }}>
      <JSONGRAPH json={data} apiKey="YOUR_API_KEY" />
    </div>
  );
}


## 🔑 API Key Usage

To use **react-jsonviewer-graph**, you must provide an API key from [jsonviewer.tools](https://jsonviewer.tools).

### 1. Get Your API Key
- Go to [jsonviewer.tools](https://jsonviewer.tools) and sign up.
- Generate an API key from your account settings.

### 2. Verify API Key
API keys are verified using this endpoint:

- https://jsonviewer.tools/api/verify?key=${apiKey}