react-json-previewer

A compact way to view object contents as JSON - Click on the component to toggle preview on/off. Intended as a simple debugging tool during react development.

Installation

npm install @tri-bit/react-json-previewer

Usage

import  JSONPreviewer  from '@tri-bit/react-json-previewer';


const sourceObject = {example:'object'};

<JSONPreviewer sourceObject={sourceObject} />

Props

| prop | description | |-----------------------------------|----------------------------------------------------------------------------------------------------------------------| | sourceObject | The only required prop - the contents of this object will be displayed by the component | | displayType | Default value is true - toggles the display of object key's type in parentheses after the key's name | | previewTitle | The always displayed title of the preview component, "JSONPreviewer" is the default value | | expanded | Default value is false - If true the preview will remain opened | | stringDisplayLimit | Default value is 1024 - Shortens the display of long strings. Set to -1 to remove the limit | | flattenArrays | Default value is true - Arrays are flattened into a string for a more compact view, set false to disable |