API Reference

Props

NameTypeDefaultDescription
valueany-Your input data. Any value, object, Array, primitive type, even Map or Set.
rootNamestring or false"root"The name of the root value.
theme"light"
| "dark"
| "auto"
| Base16 (opens in a new tab)
"light"Color theme.
classNamestring-Custom class name.
styleCSSProperties-Custom style.
sxSxProps-The sx prop (opens in a new tab) lets you style elements inline, using values from the theme.
indentWidthnumber3Indent 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.
valueTypesValueTypes-Customize the definition of data types. See Defining Data Types
enableAddboolean |
(path, currentValue) => boolean
falseWhether enable add feature. Provide a function to customize this behavior by returning a boolean based on the value and path.
enableDeleteboolean |
(path, currentValue) => boolean
falseWhether enable delete feature. Provide a function to customize this behavior by returning a boolean based on the value and path.
enableClipboardbooleanfalseWhether enable clipboard feature.
editableboolean |
(path, currentValue) => boolean
falseWhether 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.
defaultInspectDepthnumber5Default 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.
maxDisplayLengthnumber30Hide items after reaching the count.
Array and Object will be affected.

* If the number is set too large, it could result in performance issues.
groupArraysAfterLengthnumber100Group arrays after reaching the count.
Groups are displayed with bracket notation and can be expanded and collapsed by clicking on the brackets.
collapseStringsAfterLengthnumber50Cut 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.
objectSortKeysbooleanfalseWhether sort keys through String.prototype.localeCompare()
quotesOnKeysbooleantrueWhether add quotes on keys.
displayDataTypesbooleantrueWhether display data type labels.
displaySizeboolean |
(path, currentValue) => boolean
trueWhether 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.
highlightUpdatesbooleantrueWhether to highlight updates.

Mapping from mac-s-g/react-json-view (opens in a new tab)

NameTypeAlternative
namestringSee rootName
srcanySee value
collapsedbooleanSet defaultInspectDepth to 0 to collapse all.

Type Declaration

See src/type.ts (opens in a new tab)