import { JsonViewer } from "json-viewer";
import "json-viewer/theme.scss";

function App() {
  const jsonData = {
    name: "示例数据",
    items: [1, 2, 3],
  };

  return <JsonViewer input={JSON.stringify(jsonData)} />;
}

import { JsonViewer, JsonViewerConfigProvider } from "json-viewer";
import "json-viewer/theme.scss";

function App() {
  const jsonData = {
    name: "示例数据",
    items: [1, 2, 3],
  };

  return (
    <JsonViewerConfigProvider
      value={{
        defaultCollapsed: true, // 默认折叠所有节点
        // 其他配置项...
      }}
    >
      <JsonViewer input={JSON.stringify(jsonData)} />
    </JsonViewerConfigProvider>
  );
}

import { JsonViewer } from "json-viewer";
import { downloadAsJson, downloadAsXml, parseJson } from "json-viewer/utils";
import "json-viewer/theme.scss";

function App() {
  const [input, setInput] = useState("");

  // 处理文件导入
  const handleFileImport = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = (e) => {
      const content = e.target?.result as string;
      const { error } = parseJson(content);
      if (error) return;
      setInput(content);
    };
    reader.readAsText(file);
  };

  return (
    <div>
      {/* 导入按钮 */}
      <label>
        <span>导入 JSON</span>
        <input
          type="file"
          accept=".json"
          onChange={handleFileImport}
          className="hidden"
        />
      </label>

      {/* 导出按钮 */}
      <button onClick={() => downloadAsJson(input)}>下载为 JSON</button>
      <button onClick={() => downloadAsXml(input)}>下载为 XML</button>

      {/* JSON 查看器 */}
      <JsonViewer input={input} />
    </div>
  );
}