Props
| Name | Type | Default | Description |
|---|---|---|---|
value | any | - | Your input data. Any value, object, Array, primitive type, even Map or Set. |
rootName | string or false | "root" | The name of the root value. |
theme | "light" | "dark" | "auto" | Base16 (opens in a new tab) | "light" | Color theme. |
className | string | - | Custom class name. |
style | CSSProperties | - | Custom style. |
sx | SxProps | - | The sx prop (opens in a new tab) lets you style elements inline, using values from the theme. |
indentWidth | number | 3 | Indent width for nested objects |
keyRenderer | {when: (props) => boolean} | - | Customize the rendering of key when keyRenderer.when returns true. Render null in keyRenderer will cause the colons to be hidden. |
valueTypes | ValueTypes | - | Customize the definition of data types. See Defining Data Types |
enableAdd | boolean |(path, currentValue) => boolean | false | Whether enable add feature. Provide a function to customize this behavior by returning a boolean based on the value and path. |
enableDelete | boolean |(path, currentValue) => boolean | false | Whether enable delete feature. Provide a function to customize this behavior by returning a boolean based on the value and path. |
enableClipboard | boolean | false | Whether enable clipboard feature. |
editable | boolean |(path, currentValue) => boolean | false | Whether enable edit feature. Provide a function to customize this behavior by returning a boolean based on the value and path. |
onChange | (path, oldVal, newVal) => void | - | Callback when value changed. |
onCopy | (path, value) => void | - | Callback when value copied, you can use it to customize the copy behavior. *Note: you will have to write the data to the clipboard by yourself. |
onSelect | (path, value) => void | - | Callback when value selected. |
onAdd | (path) => void | - | Callback when the add button is clicked. This is the function which implements the add feature. Please see the DEMO for more details. |
onDelete | (path) => void | - | Callback when the delete button is clicked. This is the function which implements the delete feature. Please see the DEMO for more details. |
defaultInspectDepth | number | 5 | Default inspect depth for nested objects. * If the number is set too large, it could result in performance issues. |
defaultInspectControl | (path, currentValue) => boolean | - | Whether expand or collapse a field by default. Using this will override defaultInspectDepth. |
maxDisplayLength | number | 30 | Hide items after reaching the count.Array and Object will be affected.* If the number is set too large, it could result in performance issues. |
groupArraysAfterLength | number | 100 | Group arrays after reaching the count. Groups are displayed with bracket notation and can be expanded and collapsed by clicking on the brackets. |
collapseStringsAfterLength | number | 50 | Cut off the string after reaching the count. Collapsed strings are followed by an ellipsis. String content can be expanded and collapsed by clicking on the string value. |
objectSortKeys | boolean | false | Whether sort keys through String.prototype.localeCompare() |
quotesOnKeys | boolean | true | Whether add quotes on keys. |
displayDataTypes | boolean | true | Whether display data type labels. |
displaySize | boolean |(path, currentValue) => boolean | true | Whether display the size of Object, Array, Map and Set. Provide a function to customize this behavior by returning a boolean based on the value and path. |
highlightUpdates | boolean | true | Whether to highlight updates. |
Mapping from mac-s-g/react-json-view (opens in a new tab)
| Name | Type | Alternative |
|---|---|---|
name | string | See rootName |
src | any | See value |
collapsed | boolean | Set defaultInspectDepth to 0 to collapse all. |