@chumsinc/json-view

JSONView Component

---

A component for rendering data to a collapsible tree

Usage

import {solarized} from "base16";
import {JSONView} from 'json-veiw';
import 'json-view/dist/json-view.css';

const myData: any = {test: 'this is a test', success: true};

const previewFunction = (data:any) => {
    if (Array.isArray(data)) {
        return null;
    }
    const keys = Object.keys(data);
    const [key1, key2, ...rest] = keys;
    if (rest.length) {
        return <span>{key1}, {key2 ?? null}, &hellip;</span>
    }
    return (
        <span>{key1},{key2 ?? null}</span>
    )

}

<JSONView data={myData} theme={solarized} dark={true} rootNodeName={'myData'}
          collapsedStringLength={5} defaultOpenLevels={1}
          maxArrayElements={25} maxObjectElements={100}/>

/* optionally can use the JSONViewContext Provider */
<JSONViewContext.Provider data={{...defaultSettings, maxArrayElements: 100}}>
    <JSONView data={data.data} rootNodeName={'myData'} previewFunction={previewFunction} />
</JSONViewContext.Provider>

Requirements

Required packages (required as peerDependencies):

{
  "peerDependencies": {
    "css-loader": "^6.2.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "style-loader": "^3.2.1"
  }
}

Install

npm install @chumsinc/json-view

npm install base16 (optional to apply a new theme)

Props

name	type	default	description
data (required)	any	n/a	Any data to be viewed
theme	Base16Theme	google	Color theme, defaults to Monokai (dark) or Google (light)
rootNodeName	string	"root"	Name of the root node
collapsedStringLength	number	5	Number of characters to show on collapsed string (can inherit from context)
defaultOpenLevels	number	1	depth of open nodes (can inherit from context)
maxArrayElements	number	25	Number of array values to show (can inherit from context)
maxObjectElements	number	100	Number of object members to show (can inherit from context)

Styling