react-json-beautify

A react component for rendering JSON data as a tree structure.

Based on vue-json-pretty.

Install

yarn add react-json-beautify

Usage

import ReactJsonBeautify from 'react-json-beautify';
import 'react-json-beautify/styles.css';
 
ReactDOM.render(<ReactJsonBeautify {...props} />, mountNode);

Example

<ReactJsonBeautify
  data={data}
  deep={options.deep}
  showDoubleQuotes={options.showDoubleQuotes}
  showLength={options.showLength}
  showLine={options.showLine}
  highlightMouseoverNode={options.highlightMouseoverNode}
  collapsedOnClickBrackets={options.collapsedOnClickBrackets}
  onClick={handleClick}
/>

Props

• If you are using only the normal features (JSON pretty), just focus on the base properties.
• If you are using higher features (Get data), you can use base and higher attributes.

Attribute	Level	Description	Type	Default
data	normal	json data	JSON object	-
deep	normal	data depth, data larger than this depth will not be expanded	number	Infinity
showLength	normal	whether to show the length when closed	boolean	false
showLine	normal	whether to show the line	boolean	true
showDoubleQuotes	normal	whether to show doublequotes on key	boolean	true
highlightMouseoverNode	normal	highlight current node when mouseover	boolean	false
collapsedOnClickBrackets	normal	collapse control	boolean	true
v-model	higher	defines value when the tree can be selected	string	string[]
path	higher	root data path	string	root
pathChecked	higher	defines the selected data path	array	[]
pathSelectable	higher	defines whether a data path supports selection	Function(itemPath, itemData)	-
selectableType	higher	defines the selected type, this feature is not supported by default	enum: multiple, single	-
showSelectController	higher	whether to show the select controller at left	boolean	false
selectOnClickNode	higher	whether to change selected value when click node	boolean	true
highlightSelectedNode	higher	highlight current node when selected	boolean	true
onClick	-	triggered when a data item is clicked	Function(path, data)	-
onChange	-	triggered when the selected value changed (only the selectableType not null)	Function(newVal, oldVal)	-