@textea/json-viewer

This is a React component for JSON viewer, but not only a JSON viewer.

Json Viewer? ANY Data Viewer ✅

This is v2 branch with fancy features like 100% TypeScript, lightly code and customizable component support.

If you are looking for v1 version based on mac-s-g/react-json-view, Please see v1.x.

Usage

# npm
npm install @textea/json-viewer@beta
# yarn
yarn add @textea/json-viewer@beta
# pnpm
pnpm add @textea/json-viewer@beta

Type Declaration

see src/type.ts

Basic Example

import JsonViewer from '@textea/json-viewer'

const object = { /* my json object */ }
const Component = () => (<JsonViewer value={object}/>)

Customizable data type

import JsonViewer from '@textea/json-viewer'

const object = {
  // what if I want to inspect a image?
  image: 'https://i.imgur.com/1bX5QH6.jpg',
  // ... other values
}
const Component = () => (
  <JsonViewer
    value={object}
    // just define it
    valueTypes={[
      {
        is: (value) =>
          typeof value === 'string' &&
          value.startsWith('https://i.imgur.com'),
        Component: (props) => {
          return <img height="50px" src={props.value} alt={props.value}/>;
        },
      },
    ]}
  />
)

see the full code

Features

• 100% TypeScript
• Customizable
  • keyRenderer for customize key renderer
  • valueTypes for customize any value types you want
  • light | dark | base16 Theme support
  • custom metadata
• Support Next.js SSR
• onChange props allow users to edit value
• Inspect object, Array, primitive type, even Map and Set by default.
• Metadata preview, like total items, length of string...
• Copy to Clipboard on Click
• Editor for basic types
• Fully Test Coverage

Acknowledge

This package is originally based on mac-s-g/react-json-view

LICENSE

This project is licensed under the terms of the MIT license.