React 用のテーマ可能な JSON エディター

React アプリケーション用の軽量でカスタマイズ可能、テーマ対応の JSON エディターおよびビューアー コンポーネント。

基本的な使用法:

1. JSON View コンポーネントをインストールしてインポートします。

# Yarn
$ yarn add @uiw/react-json-view

# NPM
$ npm i @uiw/react-json-viewimport React from 'react';
import JsonView from '@uiw/react-json-view';

// Themes
import { lightTheme } from '@uiw/react-json-view/light';
import { darkTheme } from '@uiw/react-json-view/dark';

2.<JsonView />コンポーネントをアプリに追加します。

const myData = {
     // ...
};
<JsonView value={myData} style={darkTheme} />

3. 独自のテーマを作成します。

const customTheme = {
  '--w-rjv-font-family': 'monospace',
  '--w-rjv-color': '#9cdcfe',
  '--w-rjv-background-color': '#1e1e1e',
  '--w-rjv-line-color': '#323232',
  '--w-rjv-arrow-color': 'var(--w-rjv-color)',
  '--w-rjv-info-color': '#656565',
  '--w-rjv-update-color': '#ebcb8b',
  '--w-rjv-copied-color': '#9cdcfe',
  '--w-rjv-copied-success-color': '#28a745',
  '--w-rjv-curlybraces-color': '#d4d4d4',
  '--w-rjv-brackets-color': '#d4d4d4',
  '--w-rjv-type-string-color': '#ce9178',
  '--w-rjv-type-int-color': '#268bd2',
  '--w-rjv-type-float-color': '#859900',
  '--w-rjv-type-bigint-color': '#268bd2',
  '--w-rjv-type-boolean-color': '#559bd4',
  '--w-rjv-type-date-color': '#586e75',
  '--w-rjv-type-null-color': '#d33682',
  '--w-rjv-type-nan-color': '#859900',
  '--w-rjv-type-undefined-color': '#586e75',
};const myData = {
     // ...
};
<JsonView value={myData} style={customTheme} />

4. 利用可能なコンポーネントの小道具。

/** This property contains your input JSON */
value?: T;
/** Set the indent-width for nested objects @default 15 */
indentWidth?: number;
/** When set to `true`, data type labels prefix values @default true */
displayDataTypes?: boolean;
/** When set to `true`, `objects` and `arrays` are labeled with size @default true */
displayObjectSize?: boolean;
/** Define the root node name. @default undefined */
keyName?: string | number;
/** The user can copy objects and arrays to clipboard by clicking on the clipboard icon. @default true */
enableClipboard?: boolean;
/** Whether to highlight updates. @default true */
highlightUpdates?: boolean;
/** Whether sort keys through `String.prototype.localeCompare()` @default false */
objectSortKeys?: boolean | ((a: string, b: string) => number);
/** Display for quotes in object-key @default " */
quotes?: "'" | '"' | '';
/** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. @default false */
collapsed?: boolean | number;
/** Callback function for when a treeNode is expanded or collapsed */
onExpand?: (props: { expand: boolean; value: T; keyid: string; keyName?: string | number; }) => void;
/** Fires event when you copy */
onCopied?: CopiedProps<T>['onCopied'];
/** Redefine interface elements to re-render. */
components?: {
  braces?: MetaProps['render'];
  ellipsis?: EllipsisProps['render'];
  arrow?: JSX.Element;
  objectKey?: SemicolonProps['render'];
  value?: ValueViewProps<T>['renderValue'];
  copied?: CopiedProps<T>['render'];
};

プレビュー:

GitHub で表示: https://github.com/uiwjs/react-json-view