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) | - |