JsonTree displays either a JSON value or an array of named entries. Pass all empty-value and expand/collapse labels so your application controls the text.
id, label, and JSON value. Use entries when display labels differ from stored keys. The default expands depths 0 and 1. Override shouldExpandNodeInitially={({ depth }) => depth === 0} to expand only the root; later expansion is owned by each node.
getNodeHighlighting(keyPath) returns blue, red, partial-blue, or undefined. onNodeValueClick receives the displayed text: leaf values as strings, and the matching empty label for empty strings, arrays, and objects. The tree displays data and does not edit it.
Props
string
required
Accessible label for the expand control on a collapsed node.
string
required
Accessible label for the collapse control on an expanded node.
string
required
Display text for an empty array.
string
required
Display text for an empty object.
string
required
Display text for an empty string.
JsonTreeEntry[]
Named entries with stable id, label, and JSON value fields. Supply entries or value, not both.
GetJsonNodeHighlighting
Returns blue, red, or partial-blue highlighting for a node key path.
((valueAsString: string) => void)
Called with the clicked value as displayed: leaf values as strings, and the empty label for empty strings, arrays, and objects.
((params: ShouldExpandNodeInitiallyProps) => boolean)
Chooses initial expansion from the node keyPath and depth. The default expands the first two depths.
JsonValue
JSON value to display. Supply value or entries, not both.