@chumsinc/json-view v1.2.4

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

Styling