Skip to main content

JSON Viewer

Accessible component for rendering JSON data as an explorable tree of expandable detail elements.

Version

Installation​

NPM​

npm install @availity/json-viewer

Yarn​

yarn add @availity/json-viewer

Usage​

import React from 'react';
import JsonViewer from '@availity/json-viewer';

const Example = () => (
  <JsonViewer
    data={{ foo: { bar: { baz: ['stuff', 'things', 'etc.'] } } }}
    expandAll
  />
);

Props​

data: Record<string, unknown>​

Required. Data to be rendered. Supports most valid JavaScript objects. Some uncommon types (cyclical objects, proxies, symbols as keys) may not be fully supported.

expandAll?: boolean​

When true, all detail elements render in an open state. Default: false.

listClassNames?: string | string[]​

Class names applied to list elements in the rendered tree.

keyClassNames?: string | string[]​

Class names applied to key elements in the rendered tree.

summaryClassNames?: string | string[]​

Class names applied to summary elements in the rendered tree.

backgroundColor?: string​

A Bootstrap background color utility class. See Bootstrap docs for options. Default: 'light'.