React Json Print
A NPM package that pretty prints JSON objects into a color coded, collapsible tree. https://www.npmjs.com/package/react-json-print
Try out the interactive demo below!
Install
npm install react-json-printUsage
Simply import the component and pass it the data to be displayed.
Example:
import React from 'react';
import ReactJsonPrint from 'react-json-print';
const exampleData = {
description: "You can pass this object to the component",
props: [
'dataObject',
'dataString',
'expanded',
'depth',
],
defaultProps: {
dataObject: null,
dataString: null,
expanded: false,
depth: 0,
},
};
const App = () => (
<div>
<ReactJsonPrint dataObject={exampleData} />
</div>
);Props
dataObject
type: string, number, boolean, null, object, array
default: null
The data to be printed, provided as a valid JSON string. The string will be parsed via JSON.parse. If both dataString and dataObject are provided, the dataObject value will be used.
dataString
type: string
default: undefined
The data to be printed, provided as a valid JSON string. The string will be parsed via JSON.parse. If both dataString and dataObject are provided, the dataObject value will be used.
expanded
type: boolean
default: false
Displays the entire tree in an expanded state. By default all nested nodes in the tree are collapsed.
depth
type: number
default: 0
Limits how many levels deep to display child nodes. Value of 0 will print all child nodes. Useful for deeply nested data, when you want to limit the number of node displayed.
