@tabula/ui-json-view

Allows to view JSON in interactive way.

Installation

Use the package manager pnpm to install @tabula/ui-json-view.

pnpm add @tabula/ui-json-view

You can use npm or yarn too.

Usage

We provide a single UiJsonView component:

import { FC } from 'react';

import { UiJsonView } from '@tabula/ui-json-view';

type Props = {
  source: string;
};

const Preview: FC<Props> = ({ source }) => <UiJsonView isInteractive source={source} />;

Options

isInteractive

The isInteractive option enables expand/collapse controls for arrays/objects and activates to use collapsed option.

Also, it enables default and user actions on each line instead of closing and placeholder lines.

showDataTypes

If the showDataTypes option is enabled, then type name is shown near of each primitive value instead of null.

showObjectSize

if the showObjectSize option is enabled, then array/object size is shown near of open line.

onToggleDataTypes / onToggleObjectSize

You can provide handlers to allow toggle showDataTypes and showObjectSize options.

import { FC } from 'react';

import { UiJsonView } from '@tabula/ui-json-view';

type Props = {
  source: string;
};

const Preview: FC<Props> = ({ source }) => {
  const [showDataTypes, onToggleDataTypes] = useState(false);
  const [showObjectSize, onToggleObjectSize] = useState(false);

  return (
    <UiJsonView
      onToggleDataTypes={onToggleDataTypes}
      onToggleObjectSize={onToggleObjectSize}
      showDataTypes={showDataTypes}
      showObjectSize={showObjectSize}
      source={source}
    />
  );
};

If no one of handlers is provided, then options controls is hidden.

shortStringAfterLength

That option allows to trim long string values after the given length.

But a user can click by a string value to toggle between full and trimmed versions of the value.

collapsed

This is option allows to collapse arrays and object after the given depth.

NOTE: That option is working only when isInteractive option is enabled too.

If collapsed is equals true, then all arrays and objects is collapsed.

If collapsed is a number, then arrays and objects after the given level is collapsed.

limni

This option allows to render limited number of lines.

Usage of limit option is disable interactions like possibility to expand/collapse arrays and objects.

But it's possible to control data types and object size visibility, and toggle trimmed lines.

isVirtual

The UiJsonView supports two render modes: static (default) and virtual.

Virtual render mode is uses virtualized list under the hood.

actions

By default, we provide Copy and Copy JSONPath actions.

But we allow to user to provide additional options.

Each action handler is called with two parameters: JSONPath of the current line, and the query function, which returns a value by the given path from the original JSON value.

License

This project is ISC licensed.