json edit react
v.1.19.1
JSON/オブジェクトデータの編集または表示のためのReactコンポーネント
重要
変化の破壊：
theme入力が変更されています。組み込みのテーマは、テーマを文字列として命名するのではなく、個別にインポートして渡す必要があります。これはツリーシェーキングに適しているため、未使用のテーマはビルドにバンドルされることはありません。テーマとスタイルを参照してくださいsetDataプロップを提供し、データを外部で更新するためにonUpdate使用しないことを推奨する変更があります。状態の管理を参照してください。 npm i json-edit-react
または
yarn add json-edit-react
import { JsonEditor } from 'json-edit-react'
// In your React component:
return
< JsonEditor
data = { jsonData }
setData = { setJsonData } // optional
{ ... otherProps } /> （エンドユーザー向け）
それはかなり自己説明です（編集するために「編集」アイコンをクリックしてください）が、エディターと対話するそれほど明白ではない方法がいくつかあります。
Cmd/Ctrl/Shift-Enterを使用して新しい行を追加します（ Enter値を提出します）Enter 、 Cmd/Ctrl/Shift-Enter for submitEscapeCmd/Ctrlを押し続けると、その値ではなく選択したノードへのパスをコピーするとjsonParse prop。 必要な値のみはdataです（ただし、データを更新するためにsetDataメソッドを提供する必要があります）。
| 小道具 | タイプ | デフォルト | 説明 |
|---|---|---|---|
data | object|array | 表示 /編集されるデータ | |
setData | object|array => void | dataオブジェクトを更新する方法。追加のメモについては、以下の管理状態を参照してください。 | |
rootName | string | "data" | データオブジェクトのルートとしてエディターに表示する名前。 |
onUpdate | UpdateFunction | エディターで値が更新（編集、削除、または追加）するたびに実行する関数。更新関数を参照してください。 | |
onEdit | UpdateFunction | 値が編集されるたびに実行する関数。 | |
onDelete | UpdateFunction | 値が削除されるたびに実行する関数。 | |
onAdd | UpdateFunction | 新しいプロパティが追加されるたびに実行する機能。 | |
onChange | OnChangeFunction | ユーザー入力を入力するときに変更/制約する関数 - Onchange関数を参照してください。 | |
onError | OnErrorFunction | コンポーネントがエラーを報告するたびに実行する関数 - OnerrorFunctionを参照してください。 | |
showErrorMessages | boolean | true | コンポーネントが独自のエラーメッセージを表示する必要があるかどうか（おそらく、独自のonError機能を提供した場合にのみこれを無効にする必要があります） |
enableClipboard | boolean|CopyFunction | true | UIの「Copy to Clipboard」ボタンを有効にするかどうか。関数が提供されている場合、 trueが想定され、この関数はアイテムがコピーされるたびに実行されます。 |
indent | number | 3 | 表示されたデータのネストの各レベルのインデントの量を指定します。 |
collapse | boolean|number|FilterFunction | false | JSONツリーのノードが、ロード時にUIに「開く」表示されるかを定義します。 boolean場合、それはすべてまたはまったくありません。 number 、ノードが閉じられる後、ネストの深さを指定します。より細かい制御については、機能を提供できます。フィルター関数を参照してください。 |
collapseAnimationTime | number | 300 | コレクションノードを崩壊させるときの遷移アニメーションの時間（ミリ秒単位）。 |
restrictEdit | boolean|FilterFunction | false | true場合、編集は許可されていません。より特異性のために機能を提供できます - フィルター関数を参照してください |
restrictDelete | boolean|FilterFunction | false | restrictEdit付きと同様ですが、削除のためです |
restrictAdd | boolean|FilterFunction | false | restrictEdit付きと同様ですが、新しいプロパティを追加します |
restrictTypeSelection | boolean|DataType[]|TypeFilterFunction | true | データ型を制限するには、ユーザーが選択できます。データ型（ [ 'string', 'number', 'boolean', 'array', 'object', 'null' ] ）のリストまたはブール値にすることもできます。関数を提供できます - 上記のFilterFunction sと同じ入力を取得する必要がありますが、出力はboolean | DataType[] 。 |
restrictDrag | boolean|FilterFunction | true | falseに設定して、ドラッグアンドドロップ機能を有効にします。 drag-n-dropを参照してください |
searchText | string | undefined | データの可視性は、 searchFilterで以下に定義された方法を使用して、値と一致することによりフィルタリングされます。 |
searchFilter | "key"|"value"|"all"|SearchFilterFunction | undefined | 目に見えるアイテムをフィルタリングするためにsearchText一致させる方法を定義します。検索/フィルタリングを参照してください |
searchDebounceTime | number | 350 | searchTextが変更されたときの時間を表示します |
keySort | boolean|CompareFunction | false | trueの場合、オブジェクトキーは順序付けられます（デフォルトのjs .sort()を使用）。ソートの動作を定義するために、比較関数を提供することもできます。 |
showArrayIndices | boolean | true | 配列要素のインデックス（プロパティキーとして）を表示するかどうか。 |
showStringQuotes | boolean | true | 「引用」に文字列値を表示するかどうか。 |
showCollectionCount | boolean|"when-closed" | true | 各コレクション（オブジェクトまたは配列）にアイテムの数を表示するかどうか。 |
defaultValue | any|DefaultValueFilterFunction | null | 新しいプロパティが追加されると、この値で初期化されます。関数は、 FilterFunction Sとほぼ同じ入力で提供できますが、値を出力する必要があります。これにより、データ状態に応じて異なるデフォルト値を使用できます（たとえば、トップレベルのデフォルトはオブジェクトですが、他の場所に文字列です。） |
stringTruncate | number | 250 | これよりも長い文字列値は、切り捨てられて表示されます（ ... ）。編集時には、完全な文字列が常に表示されます。 |
translations | LocalisedStringsオブジェクト | { } | UI文字列（エラーメッセージなど）は、ローカライズされた文字列値を含むオブジェクトを渡すことで翻訳できます（数個しかありません）。ローカライズを参照してください |
theme | ThemeInput | default | 組み込みのテーマのいずれか（個別にインポート）、または一部またはすべてのテーマプロパティを指定するオブジェクト。テーマを参照してください。 |
className | string | コンポーネントに適用するCSSクラスの名前。ほとんどの場合、 themeプロパティの指定はより簡単になります。 | |
id | string | メインコンポーネントコンテナのid属性の名前。 | |
icons | {[iconName]: JSX.Element, ... } | { } | ここで指定して、組み込みのアイコンを交換します。テーマを参照してください。 |
minWidth | number|string （CSS値） | 250 | エディターコンテナの最小幅。 |
maxWidth | number|string （CSS値） | 600 | エディターコンテナの最大幅。 |
rootFontSize | number|string （CSS値） | 16px | 他のすべてのサイジングが（ em sで）導出される「ベース」フォントサイズ。これを変更することにより、コンポーネント全体をスケーリングします。容器。 |
customNodeDefinitions | CustomNodeDefinition[] | 条件関数に応じて、データツリー内の特定のノードをオーバーライドするカスタマイズされたコンポーネントを提供できます。詳細については、カスタムノードを参照してください。 （URL文字列をアクティブリンクに変換するためのシンプルなカスタムコンポーネントがメインパッケージに提供されています - こちらを参照） | |
customText | CustomTextDefinitions | コンポーネントのテキスト文字列のローカルに加えて、データに応じて動的に変更することもできます。詳細については、カスタムテキストを参照してください。 | |
customButtons | CustomButtonDefinition[] | [] | データでカスタム操作を実行できるようにする場合は、編集ボタンパネルに独自のボタンを追加できます。カスタムボタンを参照してください |
jsonParse | (input: string) => JsonData | JSON.parse | JSONのブロックを直接編集するときは、「ゆるい」入力、例えば「単一の引用」、トレーリングコンマ、または引用されていないフィールド名を許可することをお勧めします。この場合、サードパーティのJSON解析方法を提供できます。 JSON5をお勧めします。これはデモで使用されています |
jsonStringify | (data: JsonData) => string | (data) => JSON.stringify(data, null, 2) | 同様に、JSONの編集を開始するときに、JSON文字列のデフォルトのプレゼンテーションをオーバーライドできます。ネイティブJSON.stringify()に異なるフォーマットパラメーターを提供するか、前述のJSON5のようにサードパーティオプションを提供できます。 |
errorMessageTimeout | number | 2500 | UIにエラーメッセージを表示する時間（ミリ秒単位）。 |
keyboardControls | KeyboardControls | 上記のように | キーボードコントロールの一部またはすべてをオーバーライドします。詳細については、キーボードのカスタマイズを参照してください。 |
insertAtTop | boolean| "object | "array" | false | true場合、下部ではなく上部に新しい値を挿入します。それぞれ"object"または"array"に設定することにより、アレイまたはオブジェクトのみの動作を設定できます。 |
このコンポーネントの外でdata状態を自分で管理することをお勧めします。 data更新するために内部的に呼ばれるsetDataメソッドを渡すだけです。ただし、これは必須ではありません。SetDataメソッドsetData提供しない場合、データは内部で管理されます。データを使用していない場合は問題ありません。別の方法は、更新関数を使用してdata外部から更新することですが、これは、内部状態（表示されているもの）と不必要な再レンダーと同期してデータを維持する問題に遭遇する可能性があるため、特別な状況を除いて推奨されません。更新関数は、副作用の実装、エラーのチェック、またはsetDataで設定する前にデータの変異のみにのみ使用する必要があります。
データの更新（編集、削除、または追加）が発生するたびに実行されるコールバックを提供できます。これを使用して、外部状態を更新したり、API呼び出しを行いたり、保存する前にデータを変更したり、JSONスキーマに対してデータ構造を検証したりすることをお勧めします。すべての更新に対して同じ関数が必要な場合は、 onUpdateプロップだけで十分です。ただし、編集、削除、追加に何か違うものが必要な場合は、 onEdit 、 onDeleteおよびonAdd小道具を介して個別の更新関数を提供できます。
関数は、次のオブジェクトをパラメーターとして受け取ります。
{
newData , // data state after update
currentData , // data state before update
newValue , // the new value of the property being updated
currentValue , // the current value of the property being updated
name , // name of the property being updated
path // full path to the property being updated, as an array of property keys
// (e.g. [ "user", "friends", 1, "name" ] ) (equivalent to "user.friends[1].name")
}関数は何も返しません（この場合、データは正常に更新されます）、または成功/障害、エラー値、または変更されたデータを表す値です。返品値は次のいずれかであり、それに応じて処理できます。
true / void / undefined ：データは通常どおり更新され続けますfalse ：更新をエラーと見なすため、データは更新されません（以前の値に戻る）、UIに一般的なエラーメッセージが表示されますstring ：エラーも考慮されるため、データの更新はありませんが、UIエラーメッセージは提供された文字列になります[ "value", <value> ] ：入力データの代わりに返された<value>を使用するようコンポーネントに指示します。これを使用して、ユーザーの入力を自動的に変更する場合があります。たとえば、配列のソート、またはタイムスタンプフィールドをオブジェクトに挿入する場合があります。[ "error", <value> ] ： stringと同じですが、長いタプル形式です。更新関数と同様に、ユーザー入力が変更されるとonChange関数が実行されます。これを使用して、ユーザーの入力を制限または制約することができます。たとえば、数値を正の値に制限するか、文字列のラインの破損を防止できます。関数は、ユーザー入力フィールドを更新するために値を返す必要があるため、変更が行われない場合は、変更されていないことを返してください。
入力オブジェクトは更新関数入力に似ていますが、 newDataフィールドはありません（データが更新される前にこの操作が発生するため）。
// in <JsonEditor /> props
onChange = ( { newValue , name } ) => {
if ( name === "age" && newValue < 0 ) return 0 ;
if ( name === "age" && newValue > 100 ) return 100 ;
return newValue
} onChange = ( { newValue , name } ) => {
if ( name === 'name' && typeof newValue === "string" )
return newValue . replace ( / [^a-zA-Zs]|n|r / gm , '' ) ;
return newValue ;
}通常、コンポーネントは、エラー条件が検出されるたびに単純なエラーメッセージを表示します（例：無効なJSON入力、重複キー、またはonUpdate関数によって返されるカスタムエラー））。ただし、独自のエラーUIを実装するために、独自のonErrorコールバックを提供したり、追加の副作用を実行したりすることができます。 （前者の場合、おそらくshowErrorMessages Propを無効にしたいと思うでしょう。）コールバックへの入力は、他のコールバックに似ています。
{
currentData , // data state before update
currentValue , // the current value of the property being updated
errorValue , // the erroneous value that failed to update the property
name , // name of the property being updated
path , // full path to the property being updated, as an array of property keys
// (e.g. [ "user", "friends", 1, "name" ] ) (equivalent to "user.friends[1].name"),
error : {
code , // one of 'UPDATE_ERROR' | 'DELETE_ERROR' | 'ADD_ERROR' | 'INVALID_JSON' | 'KEY_EXISTS'
message // the (localised) error message that would be displayed
}
}（「カスタムノード」データセットを使用して、デモでUIのカスタムエラーの例を見ることができます。InvalidJSON入力を入力すると、通常のコンポーネントエラーメッセージの代わりに「トースト」通知が表示されます。）
アイテムがクリップボードにコピーされるたびに（ enableClipboard Propに渡された場合）が、異なる入力パラメーターを使用すると、同様のコールバックが実行されます。
key // name of the property being copied
path // path to the property
value // the value copied to the clipboard
type // Either "path" or "value" depending on whether "Cmd/Ctrl" was pressed
stringValue // A nicely stringified version of `value`
// (i.e. what the clipboard actually receives)「コピー」をクリックすると、ユーザーのフィードバックがほとんどないため、このコールバックで何らかの通知を提示することが良い考えです。
各値で表示される「コピー」、「編集」、「削除」ボタンに加えて、データのカスタム操作を許可する必要がある場合は、独自のボタンを追加できます。次の定義構造で、 customButtons Propで一連のボタン定義を提供します。
{
Element : React . FC ,
onClick : ( nodeData : NodeData , e : React . MouseEvent ) => void
}ここで、 NodeData以前の「更新関数」で受信したデータ構造と同じです。
データ構造のどのノードを編集、削除、または追加して、フィルター関数を渡すことでデータ型を変更できるかを制御できます。これらはデータ内の各プロパティで呼び出され、属性は、関数がtrueまたはfalseを返すかどうかに応じて実施されます（ true手段は編集できません）。
関数は次のオブジェクトを受け取ります。
{
key , // name of the property
path , // path to the property (as an array of property keys)
level , // depth of the property (with 0 being the root)
index , // index of the node within its collection (based on display order)
value , // value of the property
size , // if a collection (object, array), the number of items (null for non-collections)
parentData , // parent object containing the current node
fullData // the full (overall) data object
collapsed // whether or not the current node is in a
// "collapsed" state (only for Collection nodes)
} collapse小道具でもフィルター関数も利用できますので、たとえば他のすべてを崩壊させながら、深くネストのコレクションを開いた状態でデータを表示できます。
データ型を制限するために、（タイプ）フィルター関数はわずかに洗練されています。入力は同じですが、出力はboolean （特定のノードの使用可能なタイプをすべてまたはなしに制限する）、または制限されるデータ型の配列のいずれかにすることができます。利用可能な値は次のとおりです。
"string""number""boolean""null""object""array"オブジェクトのキー名を編集するための特定の制限機能はありませんが、キー名を変更することはプロパティを削除して新しいものを追加するのとtrueであるため、 restrictEditおよびrestrictDelete （およびコレクションのrestrictAdd ）の両方でtrueを返す必要があります。
また、フィルター関数をdefaultValue Propに渡すことで動的デフォルト値を設定することもできます。入力は上記と同じですが、新しいkey値を2番目のパラメーターとして取得するため、新しい値が追加された新しいキーに依存することもあります。
これらすべての制限フィルターを一緒に使用すると、合理的に洗練されたデータスキーマを実施できます。
// in <JsonEditor /> props
restrictEdit = { ( { level } ) => level === 0 }idフィールドを編集しないでください： restrictEdit = { ( { key } ) => key === "id" }
// You'd probably want to include this in `restrictDelete` as well restrictDelete = { ( { size } ) => size !== null } restrictAdd = { ( { key } ) => key !== "address" && key !== "users" }
// "Adding" is irrelevant for non-collection nodesstring値は、弦またはオブジェクトにのみ変更できます（ネスト用）nullはどこにも許可されていませんboolean値はブール値のままでなければなりません restrictTypeSelection = { ( { path , value } ) => {
if ( path . includes ( 'user' ) ) return [ 'string' , 'number' , 'boolean' ]
if ( typeof value === 'boolean' ) return false
if ( typeof value === 'string' ) return [ 'string' , 'object' ]
return [ 'string' , 'number' , 'boolean' , 'array' , 'object' ] // no "null"
} }上記のさまざまな編集ツールへのアクセスを動的に制御するだけでなく、データをサードパーティスキーマ検証ライブラリ（AJV）に渡す更新関数を作成することにより、完全なJSONスキーマ検証を行うことができます。これにより、無効な入力が拒否され、UIにエラーが表示されます（またはカスタムOnerror関数を介して）。 「JSONスキーマ検証」データセット（および「カスタムノード」データセット）を使用して、デモでこの例を見ることができます。
（AJVを使用して） onUpdate検証関数の例は次のようなものである可能性があります。
import { JsonEditor } from 'json-edit-react'
import Ajv from 'ajv'
import schema from './my-json-schema.json'
const ajv = new Ajv ( )
const validate = ajv . compile ( schema )
/// Etc....
// In the React component:
return
< JsonEditor
data = { jsonData }
onUpdate = { ( { newData } ) => {
const valid = validate ( newData )
if ( ! valid ) {
console . log ( 'Errors' , validate . errors )
const errorMessage = validate . errors
?. map ( ( error ) => ` ${ error . instancePath } ${ error . instancePath ? ': ' : '' } ${ error . message } ` )
. join ( 'n' )
// Send detailed error message to an external UI element, such as a "Toast" notification
displayError ( {
title : 'Not compliant with JSON Schema' ,
description : errorMessage ,
status : 'error' ,
} )
// This string returned to and displayed in json-edit-react UI
return 'JSON Schema error'
}
} }
{ ... otherProps } />注記
これは新機能であり、「実験的」と見なされる必要があります。それを改善するためにフィードバックまたは提案を提供してください。
restrictDragプロパティは、どのアイテム（もしあれば）を新しい位置にドラッグできるかを制御します。デフォルトでは、これはオフであるため、この機能を有効にするには、 restrictDrag = falseを設定する必要があります。上記の編集制限と同様に、このプロパティは、微調整された制御のためにフィルター関数を取ることもできます。ただし、いくつかの追加の考慮事項があります。
jsonb （バイナリJSON）タイプを使用してPostgresデータベースに保存すると、キーオーダーは意味がないため、オブジェクトが次にロードされると、キーがアルファベット順にリストされます。restrictDragフィルターは、宛先ではなくソース要素（つまり、ドラッグされているノードをドラッグする）に適用されます。restrictDelete小道具を介して）。ノードを新しい宛先にドラッグすることは、基本的に削除し、他の場所に追加するだけです。表示されたデータは、ユーザーからの検索入力に基づいてフィルタリングできます。ユーザー入力は独立してキャプチャされ（ここではUIを提供しません）、 searchText Prop。この入力は内部的に撤回されます（ searchDebounceTime Propで時間を設定できます）ので、それも必要ありません。 searchTextがテストされている値は、 searchFilter Prop。で指定されています。デフォルトでは（ searchFilter定義されていません）、データ値と一致します（ケース非感受性の部分マッチング - つまり、「ILB」、値「Bilbo」と一致します）。
searchFilter "key" （プロパティ名を一致）、 "value" （上記のデフォルト）、または"all" （プロパティと値の両方）に設定することで一致するものを指定できます。これは、ほとんどのユースケースに十分なはずですが、独自のSearchFilterFunctionを指定できます。検索関数は、上記のフィルターファクションと同じ署名ですが、 searchTextについて1つの追加の引数を実行します。
( { key , path , level , value , ... etc } : FilterFunctionInput , searchText : string ) => boolean 2つのヘルパー関数（ matchNode()とmatchNodeKey() ）がパッケージでエクスポートされ、検索機能の作成が簡単になる可能性があります（上記の"key"および"value"マッチに内部で使用される関数です）。あなたは彼らがここで何をしているかを見ることができます。
「クライアントリスト」データセットを備えたデモにカスタム検索機能の例が表示されます。検索関数は名前とユーザー名で一致し、それらの一致の1つで「クライアント」オブジェクト全体が表示されるため、特定の人を見つけて特定の詳細を編集するために使用できます。
( { path , fullData } , searchText ) => {
// Matches *any* node that shares a path (i.e. a descendent) with a matching name/username
if ( path ?. length >= 2 ) {
const index = path ?. [ 0 ]
return (
matchNode ( { value : fullData [ index ] . name } , searchText ) ||
matchNode ( { value : fullData [ index ] . username } , searchText )
)
} else return false
} 組み込みのテーマの小さな選択があります（デモアプリに見られるように）。これらのいずれかを使用するには、パッケージからインポートして、テーマの小道具として渡すだけです。
import { JsonEditor , githubDarkTheme } from 'json-edit-react'
// ...other imports
const MyApp = ( ) => {
const [ data , setData ] = useState ( { one : 1 , two : 2 } )
return < JsonEditor
data = { data }
setData = { setData }
theme = { githubDarkTheme }
// other props...
/>
}次のテーマはパッケージで入手できます（現実的には、これらは機能を紹介するためにより多く存在します - 私はより良い組み込みのテーマにオープンしているので、提案で問題を自由に作成してください）：
githubDarkThemegithubLightThememonoDarkThememonoLightThemecandyWrapperThemepsychedelicThemeただし、独自のテーマオブジェクト、またはその一部を渡すことができます。テーマ構造は次のとおりです（これは「デフォルト」テーマ定義です）：
{
displayName : 'Default' ,
fragments : { edit : 'rgb(42, 161, 152)' } ,
styles : {
container : {
backgroundColor : '#f6f6f6' ,
fontFamily : 'monospace' ,
} ,
collection : { } ,
collectionInner : { } ,
collectionElement : { } ,
dropZone : { } ,
property : '#292929' ,
bracket : { color : 'rgb(0, 43, 54)' , fontWeight : 'bold' } ,
itemCount : { color : 'rgba(0, 0, 0, 0.3)' , fontStyle : 'italic' } ,
string : 'rgb(203, 75, 22)' ,
number : 'rgb(38, 139, 210)' ,
boolean : 'green' ,
null : { color : 'rgb(220, 50, 47)' , fontVariant : 'small-caps' , fontWeight : 'bold' } ,
input : [ '#292929' , { fontSize : '90%' } ] ,
inputHighlight : '#b3d8ff' ,
error : { fontSize : '0.8em' , color : 'red' , fontWeight : 'bold' } ,
iconCollection : 'rgb(0, 43, 54)' ,
iconEdit : 'edit' ,
iconDelete : 'rgb(203, 75, 22)' ,
iconAdd : 'edit' ,
iconCopy : 'rgb(38, 139, 210)' ,
iconOk : 'green' ,
iconCancel : 'rgb(203, 75, 22)' ,
} ,
} stylesプロパティは、焦点を当てる主要なプロパティです。各キー（ property 、 bracket 、 itemCount ）は、UIの一部を指します。各キーの値は次のとおりです。
string 、その場合、それは色（またはcontainerとinputHighlightの場合の背景色）として解釈されますnull ）を返します。これにより、コンテンツまたは構造に基づいてさまざまな要素のスタイリングを動的に変更できます。nullを返すたびに「フォールバック」スタイルを提供します。 （配列では、後のアイテムの優先順位が高い）簡単な例として、「githubdark」テーマを使用したいが、いくつかの小さなものを変更するだけで、次のようなものを指定します。
// in <JsonEditor /> props
theme = { [
githubDarkTheme ,
{
iconEdit : 'grey' ,
boolean : { color : 'red' , fontStyle : 'italic' , fontWeight : 'bold' , fontSize : '80%' } ,
} ,
] }これは、これから「編集」アイコンとブール値を変更します。 
これに： 
または、ゼロから独自のテーマを作成し、テーマオブジェクト全体を上書きすることもできます。
したがって、要約すると、 theme小道具は次のいずれかを取ることができます。
"candyWrapperTheme"fragments 、 styles 、 displayNameなど、またはstylesパーツ（ルートレベル）で構成することができます[ "<themeName>, {...overrides } ]「このテーマを編集してください！」を選択することで、デモアプリのテーマのライブ編集でラウンドを再生できます。 「デモデータ」セレクターから（JSONで関数を作成することはできませんが）。
コンポーネントをスタイリングする別の方法は、CSSクラスを直接ターゲットにすることです。コンポーネントのすべての要素には一意のクラス名があるため、ブラウザインスペクターにそれらを見つけて、それに応じてオーバーライドできるはずです。すべてのクラス名は、 jer- 、たとえばjer-collection-header-row 、 jer-value-stringなどで始まります。
上記のfragmentsプロパティは、繰り返されるスタイルの「フラグメント」を一度定義し、エイリアスを使用することと呼ばれるようにするための便利さです。たとえば、すべてのアイコンを青く、わずかに大きくて間隔を空けたい場合は、次のようなフラグメントを定義する場合があります。
fragments: { iconAdjust : { color : "blue" , fontSize : "110%" , marginRight : "0.6em" } }次に、テーマオブジェクトで、次を使用してください。
{
... ,
iconEdit : "iconAdjust" ,
iconDelete : "iconAdjust" ,
iconAdd : "iconAdjust" ,
iconCopy : "iconAdjust" ,
}その後、後で調整したい場合は、1か所で更新するだけです！
フラグメントは、追加のプロパティ、さらには他のフラグメントと混合することもできます。
iconEdit: [ "iconAdjust" , "anotherFragment" , { marginLeft : "1em" } ]内部的には、すべてのサイジングと間隔がemで行われ、決してpxではありません（「ベース」サイズを設定するrootFontSizeを除く）。これにより、スケーリングがはるかに簡単になります - rootFontSizeプロップを変更するだけ（または、クラスをターゲットにしてメインコンテナにfontSizeを設定するか、テーマを微調整します）、それに応じてコンポーネント全体のスケールを視聴します。
デフォルトのアイコンは置き換えることができますが、それらをReact/HTML要素として提供する必要があります。次のようにキー付きicons Prop内でそれらのいずれかまたはすべてを定義するだけです。
icons = { {
add : < YourIcon />
edit : < YourIcon / >
delete : < YourIcon />
copy : < YourIcon / >
ok : < YourIcon / >
cancel : < YourIcon / >
chevron : < YourIcon / >
} }アイコンコンポーネントには、テーマスタイルがカスタム要素に追加されないため、独自のスタイルを定義する必要があります。
translationsオブジェクトを渡してデフォルトの文字列を置き換えることにより、実装をローカライズします。キーとデフォルト（英語）値は次のとおりです。
{
ITEM_SINGLE : '{{count}} item' ,
ITEMS_MULTIPLE : '{{count}} items' ,
KEY_NEW : 'Enter new key' ,
ERROR_KEY_EXISTS : 'Key already exists' ,
ERROR_INVALID_JSON : 'Invalid JSON' ,
ERROR_UPDATE : 'Update unsuccessful' ,
ERROR_DELETE : 'Delete unsuccessful' ,
ERROR_ADD : 'Adding node unsuccessful' ,
DEFAULT_STRING : 'New data!' ,
DEFAULT_NEW_KEY : 'key' ,
} データツリーの特定のノードを独自のカスタムコンポーネントに置き換えることができます。例は、画像表示、またはカスタムデートエディターの場合、または視覚的なキラキラを追加するだけです。インタラクティブデモの「カスタムノード」データセットを参照して、実行中の表示を確認してください。 （他のデータセットでISO文字列を編集するときに表示されるカスタム日付ピッカーもあります。）
カスタムノードは、次の構造のオブジェクトの配列として、 customNodeDefinitions Propで提供されます。
{
condition , // a FilterFunction, as above
element , // React Component
customNodeProps , // object (optional)
hideKey , // boolean (optional)
defaultValue , // JSON value for a new instance of your component
showOnEdit // boolean, default false
showOnView // boolean, default true
showEditTools // boolean, default true
name // string (appears in Types selector)
showInTypesSelector , // boolean (optional), default false
// Only affects Collection nodes:
showCollectionWrapper // boolean (optional), default true
wrapperElement // React component (optional) to wrap *outside* the normal collection wrapper
wrapperProps // object (optional) -- props for the above wrapper component
} conditionは単なるフィルター関数であり、同じ入力パラメーター（ key 、 path 、 valueなど）があり、 elementは反応コンポーネントです。データ構造内のすべてのノードは各条件関数を介して実行され、その一致はすべてカスタムコンポーネントに置き換えられます。ノードが複数のカスタム定義条件（複数のコンポーネントから）を1つ以上一致させる場合、最初のコンポーネントが使用されるため、配列に優先順序で配置することに注意してください。
コンポーネントは、標準ノードコンポーネントと同じプロップをすべて受信します（CodeBaseを参照）が、 customNodePropsオブジェクトを介して必要に応じて追加のプロップをコンポーネントに渡すことができます。カスタム日付ピッカーの徹底的な例は、デモで（他のいくつかのより基本的なプレゼンテーションのものとともに）使用されています。これは、標準の小道具といくつかのカスタムプロップを利用する方法を確認するために検査できます。ここでソースコードを表示します
デフォルトでは、コンポーネントは、他の値と同様に、属するプロパティキーの右側に表示されます。ただし、 hideKey: trueを設定することでキー自体を非表示にすると、カスタムコンポーネントが列全体を取ります。 （例として「カスタムノード」データセットの「提示」ボックスを参照してください。）
また、デフォルトでは、コンポーネントは「ディスプレイ」要素として扱われます。つまり、JSONビューアに表示されますが、編集すると標準の編集インターフェイスに戻ります。ただし、これは、 showOnEdit 、 showOnViewおよびshowEditTools小道具で変更できます。たとえば、日付のピッカーは編集するときにのみ必要になる場合があり、表示のためにAs-ISを残します。 showEditTools小道具は、ホバー上の各値の右側に表示される編集アイコン（コピー、追加、編集、削除）を指します。これらを無効にすることを選択しているが、コンポーネントに「編集」モードを持つようにコンポーネントに必要な場合は、編集を切り替えるために独自のUIメカニズムを提供する必要があります。
ユーザーは、値を編集/追加するときにタイプセレクターの「タイプ」として選択することにより、特別なノードの新しいインスタンスを作成できるようにすることができます。 showInTypesSelector: true 。ただし、これが有効になっている場合は、 name （ユーザーがセレクターに表示するもの）と、ユーザーがこの「タイプ」を選択したときに挿入されるデータであるdefaultValueも提供する必要があります。 （ defaultValue 、カスタムコンポーネントを使用してすぐに表示されるために、 condition関数を通過する場合はtrueを返す必要があります。）
URL文字列をクリック可能なリンクに変換するためのシンプルなカスタムコンポーネントと定義には、ボックスから使用できるメインパッケージが付属しています。ようにインポートして使用するだけです：
import { JsonEditor , LinkCustomNodeDefinition } from 'json-edit-react'
// ...Other stuff
return (
< JsonEditor
{ ... otherProps }
customNodeDefinitions = { [ LinkCustomNodeDefinition , ... otherCustomDefinitions ] }
/>
)ほとんどの場合、値ノード（つまり、 arrayまたはobjectコレクションノードではない）に合わせてカスタムノードを作成することが望ましい（そしてより簡単）。これは、すべてのデモの例が示すものです。ただし、コレクションノード全体をターゲットにしたい場合は、他にも知っておくべきことがいくつかあります。
childrenプロパティを使用して表示することができます。それを処理するコンポーネントの責任になります。elementプロップ（つまり、コレクションの内容として表示されます）wrapperElement （上記のwrapperPropsで説明できるように、小道具は提供できます）。繰り返しますが、内側の内容（カスタムelementを含む）は、React childrenを使用して表示できます。この例では、青い境界線がwrapperElementを示し、赤い境界は内側のelementを示しています。 
showCollectionWrapper （デフォルトtrue ）があります。これは、 falseに設定すると、周囲のコレクション要素（つまり、シェブロンとブラケットを非表示/表示）を隠します。この場合、必要に応じてコンポーネントに独自の非表示/表示メカニズムを提供する必要があります。 コンポーネントによって表示されるさまざまなテキスト文字列を変更することができます。ローカライズできますが、特定の条件に基づいて表示されたテキストをオーバーライドする関数を指定することもできます。たとえば、プロパティカウントテキスト（デフォルトの6 itemsなど）に特定のタイプのノードの概要を示すことが必要です。たとえば、（デモから取得）：
customTextプロパティには、ローカライズ可能なキーをキーとして、文字列を返す関数（またはnullがローカライズされた文字列またはデフォルトの文字列にフォールバックする）を使用して、オブジェクトを使用します。これらの関数への入力はフィルター関数と同じであるため、この例では、次のように定義されます。
// The function definition
const itemCountReplacement = ( { key , value , size } ) => {
// This returns "Steve Rogers (Marvel)" for the node summary
if ( value instanceof Object && 'name' in value )
return ` ${ value . name } ( ${ ( value ) ?. publisher ?? '' } )`
// This returns "X names" for the alias lists
if ( key === 'aliases' && Array . isArray ( value ) )
return ` ${ size } ${ size === 1 ? 'name' : 'names' } `
// Everything else as normal
return null
}
// And in component props...
. . . otherProps ,
customText = {
ITEM_SINGLE : itemCountReplacement ,
ITEMS_MULTIPLE : itemCountReplacement ,
} デフォルトのキーボードコントロールは上記で概説されていますが、これらをカスタマイズ/オーバーライドすることは可能です。定義された上書きを上書きしたいアクションで、 keyboardControls小道具を渡すだけです。デフォルトの構成オブジェクトは次のとおりです。
{
confirm : 'Enter' , // default for all Value nodes, and key entry
cancel : 'Escape' ,
objectConfirm : { key : 'Enter' , modifier : [ 'Meta' , 'Shift' , 'Control' ] } ,
objectLineBreak : 'Enter' ,
stringConfirm : 'Enter' ,
stringLineBreak : { key : 'Enter' , modifier : 'Shift' } ,
numberConfirm : 'Enter' ,
numberUp : 'ArrowUp' ,
numberDown : 'ArrowDown' ,
booleanConfirm : 'Enter' ,
clipboardModifier : [ 'Meta' , 'Control' ] ,
collapseModifier : 'Alt' ,
}（たとえば）場合、一般的な「確認」アクションを「cmd-enter」（Mac）または「ctrl-enter」に変更したい場合、次のように渡すだけです。
keyboardControls = {
confirm : {
key : "Enter" ,
modifier : [ "Meta" , "Control" ]
}
}考慮事項：
stringConfirm 、 numberConfirm 、およびbooleanConfirmの値を確認するconfirmがある場合のみを指定する必要があります。clipboardModifierとして「メタ」/「CMD」も受け入れます）。 ほとんどの場合、元に戻す/やり直された機能はおそらく望ましいものですが、これは2つの主な理由から、コンポーネントに組み込まれていません。
独自の実装で役立つ可能性のあるいくつかのヘルパー機能、コンポーネント、およびタイプ（フィルターまたは更新機能、またはカスタムコンポーネントの作成から）は、パッケージからエクスポートされます。
themes ：組み込みのすべてのテーマ定義を含むオブジェクトLinkCustomComponent ：ハイパーリンクのレンダリングに使用されるコンポーネントLinkCustomNodeDefinition ：ハイパーリンクのカスタムノード定義IconAdd 、 IconEdit 、 IconDelete 、 IconCopy 、 IconOk 、 IconCancel 、 IconChevron ：すべての組み込みのアイコンコンポーネントmatchNode 、 matchNodeKey ：カスタム検索機能を定義するためのヘルパーtruncate ：指定された長さに文字列を切り捨てる機能。こちらをご覧くださいextract ：関数文字列パスから深くネストされたオブジェクト値を抽出します。こちらをご覧くださいassign ：文字列パスからディープオブジェクト値を設定する機能。こちらをご覧くださいThemeName ：内蔵テーマ名の文字列リテラルリストTheme ：完全なテーマオブジェクトThemeInput ： themeプロップの入力タイプJsonEditorProps ：JSONエディターコンポーネントのすべての入力小道具JsonData ：メインdataオブジェクト - 有効なJSON構造UpdateFunction 、 OnChangeFunction 、 OnErrorFunction FilterFunction 、 CopyFunction 、 SearchFilterFunction 、 CompareFunction 、 TypeFilterFunction 、 LocalisedString 、 CustomNodeDefinition 、CustomTextDefinitions、 CustomTextDefinitions 、 CustomTextFunction 、TranslateFunction ：ローカリゼーションキーを取得し、翻訳された文字列を返す関数IconReplacements ： icons PROPの入力タイプCollectionNodeProps ：すべての小道具は「コレクション」ノード（つまりオブジェクト/配列）に内部的に渡されますValueNodeProps ：すべての小道具は内部的に「値」ノードに渡されます（つまり、オブジェクト/配列ではありません）CustomNodeProps ：すべてのプロップは、カスタムノードに内部的に渡されます。基本的に、 CollectionNodePropsと同じように、コンポーネントに固有の小道具を渡すための追加のcustomNodePropsフィールドを備えています `DataType ： "string" | "number" | "boolean" | "null" | "object" | "array"KeyboardControls ：キーボードのカスタマイズプロップの構造https：//github.com/carlosnz/json-edit-rect/issuesを開いてください
紹介したい主な機能は次のとおりです。
This component is heavily inspired by react-json-view, a great package that I've used in my own projects. However, it seems to have been abandoned now, and requires a few critical fixes, so I decided to create my own from scratch and extend the functionality while I was at it.
defaultValue function takes the new key as second parameteroverflow: clip setting based on animating statetrue to represent successsetData prop to discourage reliance on internal data state managementuseEffect hooksnull #90onError callback available for custom error handlingrootFontSize prop to set the "base" size for the componentonChange prop to allow validation/restriction of user input as they typedata if user hasn't actually changed a value (prevents Undo from being unnecessarily triggered)wrapperElement propid propindex in Filter (and other) function inputdefaultValue prop
